/* Opt-in RavText appearance. No rule applies without rt-modern-interface.
   Editor contents, typography, print pages and rendering geometry are untouched. */
@media screen {
  body.rt-modern-interface {
    --rt-modern-edge: rgba(91, 111, 143, .23);
    --rt-modern-shadow: 0 10px 30px rgba(20, 44, 82, .09);
    --rt-modern-radius: 16px;
  }
  body.rt-modern-interface.light-theme {
    background: linear-gradient(155deg, #f1f5fc 0%, #fafbff 54%, #eef4fc 100%);
  }
  body.rt-modern-interface .app-header {
    background: var(--panel, #fff);
    border-bottom: 1px solid var(--rt-modern-edge);
    box-shadow: 0 4px 18px rgba(23, 57, 101, .07);
  }
  body.rt-modern-interface .app-header h1 { letter-spacing: -.015em; }
  body.rt-modern-interface .status-row {
    border-radius: 10px;
    line-height: 1.5;
  }
  body.rt-modern-interface .ravtext-simple-workflow:not([data-mode="professional"]) {
    margin: 10px auto;
    width: calc(100% - 20px);
    border: 1px solid var(--rt-modern-edge);
    border-radius: var(--rt-modern-radius);
    box-shadow: var(--rt-modern-shadow);
  }
  body.rt-modern-interface .ravtext-simple-workflow .sw-stage,
  body.rt-modern-interface .ravtext-simple-workflow .sw-search {
    border-radius: 13px;
  }
  body.rt-modern-interface .ravtext-simple-workflow .sw-step {
    border-radius: 11px;
  }
  body.rt-modern-interface .ravtext-simple-workflow .sw-action {
    border-radius: 11px;
    transition: box-shadow .15s ease, transform .15s ease;
  }
  body.rt-modern-interface .ravtext-simple-workflow .sw-action:hover:not(:disabled) {
    box-shadow: 0 3px 11px rgba(33, 86, 163, .16);
  }
  body.rt-modern-interface main.main > .panel {
    min-inline-size: 0;
    max-inline-size: 100%;
    border-radius: var(--rt-modern-radius);
    border-color: var(--rt-modern-edge);
    box-shadow: var(--rt-modern-shadow);
  }
  body.rt-modern-interface main.main :is(.toolbar, .panes-toolbar) {
    min-inline-size: 0;
    max-inline-size: 100%;
    border-radius: 12px;
  }
  body.rt-modern-interface main.main .pane {
    min-inline-size: 0;
    max-inline-size: 100%;
    border-radius: 12px;
    border-color: var(--rt-modern-edge);
    box-shadow: 0 3px 14px rgba(21, 50, 90, .06);
  }
  body.rt-modern-interface main.main .pane-header {
    border-start-start-radius: 11px;
    border-start-end-radius: 11px;
  }
  body.rt-modern-interface main.main #ribbon-tabs {
    max-inline-size: 100%;
  }
  body.rt-modern-interface .ravtext-simple-workflow .sw-appearance {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.3;
    padding: 7px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body.rt-modern-interface .ravtext-simple-workflow #sw-appearance[aria-pressed="true"] {
    border-color: #7197d8;
    background: #eaf2ff;
    color: #153d7b;
  }
  body.rt-modern-interface.dark-theme .ravtext-simple-workflow #sw-appearance[aria-pressed="true"],
  body.rt-modern-interface[data-theme="dark"] .ravtext-simple-workflow #sw-appearance[aria-pressed="true"] {
    background: #2b4160;
    color: #f5f7fb;
    border-color: #739ad0;
  }
  body.rt-modern-interface .ravtext-simple-workflow #sw-appearance:focus-visible {
    outline: 3px solid #527fc4;
    outline-offset: 3px;
  }
}
@media screen and (max-width: 760px) {
  body.rt-modern-interface .app-header .app-header-row {
    flex-wrap: wrap;
    gap: 8px;
    min-inline-size: 0;
  }
  body.rt-modern-interface .app-header .app-header-actions {
    min-inline-size: 0;
    max-inline-size: 100%;
  }
  body.rt-modern-interface .ravtext-simple-workflow:not([data-mode="professional"]) {
    width: calc(100% - 12px);
    margin-block: 6px;
  }
  body.rt-modern-interface .ravtext-simple-workflow .sw-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  body.rt-modern-interface main.main :is(#ribbon-tabs, .toolbar, .panes-toolbar) {
    max-inline-size: 100%;
    overscroll-behavior-inline: contain;
  }
}
@media screen and (max-width: 420px) {
  body.rt-modern-interface .ravtext-simple-workflow .sw-heading {
    flex: 1 1 100%;
  }
  body.rt-modern-interface .ravtext-simple-workflow .sw-appearance {
    flex: 1 1 auto;
  }
}
@media screen and (prefers-reduced-motion: reduce) {
  body.rt-modern-interface .ravtext-simple-workflow .sw-action {
    transition: none;
  }
}

/* The appearance choice is visible in both workflow modes, including when the
   simple workflow has not loaded. Do not hide it behind rt-modern-interface. */
@media screen {
  body .app-header-actions .rt-appearance-toggle {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    order: -20;
    min-height: 36px;
    max-inline-size: 100%;
    padding: 7px 13px;
    color: #ffffff;
    background: #1759ad;
    border: 1px solid #1759ad;
    border-radius: 11px;
    font: 650 13px/1.35 var(--ravtext-ui-font-family, sans-serif);
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  body .app-header-actions .rt-appearance-toggle:hover {
    background: #103d7b;
    border-color: #103d7b;
    color: #ffffff;
  }
  body .app-header-actions .rt-appearance-toggle:focus-visible {
    outline: 3px solid #d6a747;
    outline-offset: 2px;
  }
  body.rt-modern-interface .app-header-actions .rt-appearance-toggle[aria-pressed="true"] {
    color: #193a63;
    background: #edf3ff;
    border-color: #6c94ca;
  }
  body.rt-modern-interface .app-header-actions .rt-appearance-toggle[aria-pressed="true"]:hover {
    background: #d9e8ff;
  }
}
@media screen and (max-width: 420px) {
  body .app-header-actions .rt-appearance-toggle {
    flex: 1 0 auto;
    min-height: 40px;
  }
}