/* Shared saved presets. The same content and colours appear in the editor,
   preview and public page. No user-authored CSS or clipping is involved. */
.rich-content :is(.editor-box,.editor-card[class*="panel-"]){--fep-panel-bg:#192438;--fep-panel-text:#e4ebf8;--fep-panel-link:#bdd4ff;--fep-panel-line:#5b7090;--fep-panel-radius:16px;--fep-panel-border:1px;--fep-panel-shadow:none}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-tone-black{--fep-panel-bg:#090c12;--fep-panel-text:#e7edf9;--fep-panel-link:#b4cfff;--fep-panel-line:#60708b}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-tone-blue{--fep-panel-bg:#163965;--fep-panel-text:#edf4ff;--fep-panel-link:#c6deff;--fep-panel-line:#7ca9dd}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-tone-red{--fep-panel-bg:#5c2330;--fep-panel-text:#fff0f3;--fep-panel-link:#ffd0d9;--fep-panel-line:#ca8f9a}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-tone-teal{--fep-panel-bg:#153e40;--fep-panel-text:#e9fbf7;--fep-panel-link:#b1f0e5;--fep-panel-line:#80b7b2}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-tone-violet{--fep-panel-bg:#392857;--fep-panel-text:#f5efff;--fep-panel-link:#e0ccff;--fep-panel-line:#ae94cf}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-tone-light{--fep-panel-bg:#edf2fa;--fep-panel-text:#1b293d;--fep-panel-link:#204e94;--fep-panel-line:#667993}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-tone-transparent{--fep-panel-bg:transparent;--fep-panel-text:inherit;--fep-panel-link:inherit;--fep-panel-line:#70819b}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-0{--fep-panel-radius:0px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-8{--fep-panel-radius:8px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-24{--fep-panel-radius:24px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-40{--fep-panel-radius:40px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-pill{--fep-panel-radius:9999px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle{--fep-panel-radius:50%}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-border-none{--fep-panel-border:0px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-border-strong{--fep-panel-border:3px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-shadow-soft{--fep-panel-shadow:0 12px 32px #050a183d}
.rich-content.rich-content .editor-box,.rich-content.rich-content .editor-layout .editor-card[class*="panel-"]{display:flow-root;box-sizing:border-box;min-width:0;padding:1.25rem;background:var(--fep-panel-bg);color:var(--fep-panel-text);border:var(--fep-panel-border) solid var(--fep-panel-line);border-radius:var(--fep-panel-radius);box-shadow:var(--fep-panel-shadow);overflow:visible;overflow-wrap:anywhere}
.rich-content .editor-box{clear:both;width:min(100%,420px);margin:1.5rem auto}
.rich-content .editor-box.panel-width-compact{width:min(100%,280px)}
.rich-content .editor-box.panel-width-full{width:100%}
.rich-content .editor-box.panel-align-left{margin-left:0;margin-right:auto}
.rich-content .editor-box.panel-align-right{margin-left:auto;margin-right:0}
/* Named inline-size containment keeps floats inside the article/editor and lets
   the generated width classes preserve a readable column beside each box. */
.rich-content,.rich-content .editor-box,.rich-content .editor-card{container-type:inline-size;container-name:fep-rich-flow}
.rich-content .editor-box.panel-flow-none{float:none;shape-outside:none}
.rich-content .editor-box.panel-flow-left{float:left;clear:left;margin:.35rem 1.25rem 1rem 0;shape-outside:inset(0 round var(--fep-panel-radius)) border-box;shape-margin:1.25rem}
.rich-content .editor-box.panel-flow-right{float:right;clear:right;margin:.35rem 0 1rem 1.25rem;shape-outside:inset(0 round var(--fep-panel-radius)) border-box;shape-margin:1.25rem}
/* A square's ellipse is an exact circle. The same expression remains safe for
   naturally taller content before the optional runtime marks it expanded. */
.rich-content .editor-box.panel-radius-circle:is(.panel-flow-left,.panel-flow-right){shape-outside:ellipse(50% 50%) border-box}
.rich-content .editor-box.panel-radius-circle[data-fep-box-expanded]:is(.panel-flow-left,.panel-flow-right){shape-outside:inset(0 round 24px) border-box}
.rich-content .editor-box.panel-width-full:is(.panel-flow-left,.panel-flow-right){float:none;clear:both;shape-outside:none!important;margin:1.5rem auto}
/* A circle's actual text column is its inscribed 68% area, not the container's
   complete width. Nested floats stay in flow there instead of squeezing text. */
.rich-content .panel-radius-circle .editor-box:is(.panel-flow-left,.panel-flow-right){float:none;clear:both;shape-outside:none!important;margin:1.5rem auto}
@container fep-rich-flow (max-width:680px){
  .rich-content .editor-box:is(.panel-width-medium,:not([class*="panel-width-"])):is(.panel-flow-left,.panel-flow-right){float:none;clear:both;shape-outside:none!important;margin:1.5rem auto}
}
@container fep-rich-flow (max-width:540px){
  .rich-content .editor-box.panel-width-compact:is(.panel-flow-left,.panel-flow-right){float:none;clear:both;shape-outside:none!important;margin:1.5rem auto}
}
.rich-content :is(.editor-box,.editor-card[class*="panel-"])>:first-child{margin-top:0}
.rich-content :is(.editor-box,.editor-card[class*="panel-"])>:last-child{margin-bottom:0}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]) :is(p,h2,h3,h4,ul,ol,li,blockquote,summary,caption){color:inherit}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]) a{color:var(--fep-panel-link);text-decoration:underline}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]) a:hover{color:var(--fep-panel-link);text-decoration-thickness:2px}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]) :is(blockquote,.editor-sources,.editor-toc){background:var(--fep-panel-bg);color:inherit;border-color:var(--fep-panel-line)}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]) :is(th,td){background:var(--fep-panel-bg);color:inherit;border-color:var(--fep-panel-line)}
.rich-content :is(.editor-box,.editor-card[class*="panel-"]) .editor-sources:before{color:var(--fep-panel-link)}
/* Keep the selected presets authoritative even while a cover header compacts. */
.rich-content .editor-layout.layout-cover-header[data-fep-layout-active] .editor-card[class*="panel-"]:first-child{background:var(--fep-panel-bg);border-radius:var(--fep-panel-radius);box-shadow:var(--fep-panel-shadow)}
.rich-content .editor-layout.layout-stack[data-fep-layout-active] .editor-card[class*="panel-"]{box-shadow:var(--fep-panel-shadow)}

/* Inscribed square: the content uses 68% of the circle's own width. Container
   units give matching 16% top/bottom space without adding editor DOM wrappers.
   Both circle and expanded state retain the exact same spacing. */
@supports (container-type:inline-size) and (width:1cqi){
  .rich-content.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle{container-type:inline-size;aspect-ratio:1;min-height:0!important;padding:0!important;align-self:flex-start;display:flex!important;flex-direction:column;justify-content:center}
  .rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle>*{max-width:68%!important;margin-left:auto;margin-right:auto;flex-shrink:0}
  .rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle>:first-child{margin-top:16cqi!important}
  .rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle>:last-child{margin-bottom:16cqi!important}
  .rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle>img{display:block;float:none}
  .rich-surface div.editor-card.panel-radius-circle:before{position:absolute;top:5%;left:50%;transform:translateX(-50%);margin:0;color:inherit;white-space:nowrap}
  .rich-content.rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle[data-fep-box-expanded]{aspect-ratio:auto;--fep-panel-radius:24px}
  .rich-content .editor-layout:is(.layout-stack,.layout-cover-header) .editor-card.panel-radius-circle{width:100%;max-width:420px;margin-left:auto;margin-right:auto}
  .rich-content .editor-layout.layout-cover-header[data-fep-layout-active] .editor-card.panel-radius-circle:first-child{width:calc(16rem + (1 - var(--fep-cover-progress,0))*164px)}
}
@supports not ((container-type:inline-size) and (width:1cqi)){
  .rich-content :is(.editor-box,.editor-card[class*="panel-"]).panel-radius-circle{--fep-panel-radius:24px}
  .rich-content .editor-box.panel-radius-circle:is(.panel-flow-left,.panel-flow-right){shape-outside:inset(0 round 24px) border-box}
}
@supports not (container-type:inline-size){
  .rich-content .editor-box:is(.panel-flow-left,.panel-flow-right){float:none;clear:both;shape-outside:none!important;margin:1.5rem auto}
}
@media(max-width:480px){
  .rich-content .editor-box:is(.panel-flow-left,.panel-flow-right){float:none;clear:both;shape-outside:none!important;margin:1.5rem auto}
}
@media print{
  .rich-content.rich-content .editor-box,.rich-content.rich-content .editor-layout .editor-card[class*="panel-"]{box-shadow:none!important;break-inside:avoid}
  .rich-content .editor-box:is(.panel-flow-left,.panel-flow-right){float:none!important;clear:both;shape-outside:none!important;margin:1.5rem auto}
}