/* Baan Arun community portal — the site's layered dark system applied to FluentCommunity.
 * Portal root is .fcom_wrap (verified in 2.9.1 markup; body has no portal class).
 * Colour variables come from inc/community-branding.php via the plugin's own generator;
 * this file adds fonts, surfaces, depth, motion, and component polish for both modes.
 * WEB-127: depth layers, nav/sidebar/feed panes and the theme-owned right rail. */

/* 1. Fonts — beat theme-default.css's `body *` declaration with a scoped descendant rule. */
body .fcom_wrap,
body .fcom_wrap * { font-family: "Montserrat", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; }
body .fcom_wrap :lang(th),
body .fcom_wrap :lang(th) * { font-family: "Noto Sans Thai", "Montserrat", system-ui, sans-serif; }
body .fcom_wrap :is(h1, h2, h3, h4, h5, h6),
body .fcom_wrap :is(h1, h2, h3, h4, h5, h6) * {
  font-family: "Montserrat", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body .fcom_wrap :is(.space_section_title, .baan-kicker, .baan-index, .baan-widget__kicker, .baan-widget__meta, pre, code, kbd, samp),
body .fcom_wrap :is(.space_section_title, .baan-kicker, .baan-index, .baan-widget__kicker, .baan-widget__meta, pre, code, kbd, samp) * {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 2. Paired mode tokens. Dark is the default; light is the dawn palette.
 *    Small-UI alpha is .56 (WEB-127 token) so 10–13px labels clear 4.5:1 on #0c1513. */
.fcom_wrap {
  --bc-ground: #070c0b;
  --bc-pane: #0c1513;
  --bc-pane-fill: linear-gradient(180deg, rgba(246, 240, 228, 0.05), rgba(246, 240, 228, 0.015)), #0c1513;
  --bc-glass: #12201c;
  --bc-line: rgba(246, 240, 228, 0.08);
  --bc-line-2: rgba(246, 240, 228, 0.15);
  --bc-fg: #fffaf2;
  /* Body and meta text are brighter than the original 0.66/0.56. Those already cleared
   * WCAG AA (7.1:1 and 5.5:1 on the pane), but AA is a floor for legibility, not a target
   * for sustained reading -- this is a course people read long-form on a phone, often at
   * low screen brightness. Only the alpha moves: the ink stays the same #f6f0e4 paper, so
   * the palette is unchanged and the three-step hierarchy (1.00 / 0.82 / 0.70) still reads.
   * Measured on --bc-pane #0c1513: 11.2:1 and 8.3:1, both AAA. */
  --bc-fg-2: rgba(246, 240, 228, 0.82);
  --bc-fg-3: rgba(246, 240, 228, 0.70);
  --bc-accent: #d95d3f;
  --bc-active: #f5c95e;
  --bc-link: #b9d8cc;
  --bc-pill: rgba(255, 250, 242, 0.9);
  --bc-pill-hover: #fffaf2;
  --bc-pill-text: #070c0b;
  --bc-pill-shadow: 0 0 0 1px rgba(246, 240, 228, 0.18), 0 10px 30px -12px rgba(217, 93, 63, 0.45);
  --bc-chip: #12201c;
  --bc-chip-text: #f5c95e;
  --bc-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(246, 240, 228, 0.06) inset;
  --bc-shadow-hover: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 60px -30px rgba(217, 93, 63, 0.45), 0 1px 0 rgba(246, 240, 228, 0.06) inset;
  --bc-radius: 22px;
  --bc-radius-lg: 28px;
  --bc-radius-sm: 12px;
  --bc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html:not(.dark) .fcom_wrap {
  --bc-ground: #fbf6ec;
  --bc-pane: #ffffff;
  --bc-pane-fill: #ffffff;
  --bc-glass: #f6f0e4;
  --bc-line: rgba(22, 48, 43, 0.09);
  --bc-line-2: rgba(22, 48, 43, 0.18);
  --bc-fg: #1d2925;
  --bc-fg-2: #3d4a45;
  --bc-fg-3: #59665e;
  --bc-accent: #d95d3f;
  --bc-active: #a8402b;
  --bc-link: #2f5a48;
  --bc-pill: #16302b;
  --bc-pill-hover: #1d2925;
  --bc-pill-text: #fbf6ec;
  --bc-pill-shadow: 0 6px 18px rgba(22, 48, 43, 0.12);
  --bc-chip: #16302b;
  --bc-chip-text: #fbf6ec;
  --bc-shadow: 0 1px 4px rgba(22, 48, 43, 0.05);
  --bc-shadow-hover: 0 6px 18px rgba(22, 48, 43, 0.08);
}

/* 2b. Depth on the ground (dark only): dawn glow, sun horizon, two hill silhouettes
 *     and the site's fractal-noise grain. Pure CSS, no markup and no vendor change.
 *     The layers live on .fcom_wrap's own pseudo elements inside an isolated stacking
 *     context; inner plugin surfaces that paint the ground colour are made transparent
 *     so the layers stay visible. If a future plugin version paints an opaque wrapper
 *     above them, move the same two rules to `body:has(.fcom_wrap)` — nothing else changes. */
html.dark .fcom_wrap {
  position: relative;
  isolation: isolate;
  background-color: var(--bc-ground);
}
/* The dawn backdrop below is a z-index:-1 pseudo-element on .fcom_wrap, so it paints behind
 * that element's own background -- and .fluent_com, a child in normal flow, paints above it.
 * Both carried an opaque --fcom-primary-bg from the colour schema, which hid the backdrop
 * completely: the ridges and gradients were rendered every load and never visible. Body keeps
 * the #070c0b ground, so clearing these two only exposes the layer that was already there.
 * Dark only -- the backdrop itself is scoped to html.dark. */
html.dark .fcom_wrap,
html.dark .fcom_wrap .fluent_com { background-color: transparent; }

html.dark .fcom_wrap::before,
html.dark .fcom_wrap::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
html.dark .fcom_wrap::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23f6f0e4' fill-opacity='0.04' d='M0 258C260 206 520 296 780 248s470 32 660 -8v80H0z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23f6f0e4' fill-opacity='0.05' d='M0 200C220 130 400 250 700 190s480 46 740 -22v152H0z'/%3E%3C/svg%3E"),
    radial-gradient(60% 60% at 50% 100%, rgba(245, 201, 94, 0.1), transparent 65%),
    radial-gradient(70% 45% at 50% -12%, rgba(217, 93, 63, 0.2), transparent 70%);
  background-repeat: no-repeat;
  background-position: bottom center, bottom center, bottom center, top center;
  background-size: 100% 26vh, 100% 38vh, 100% 100%, 100% 100%;
}
html.dark .fcom_wrap::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='baanGrain' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23baanGrain)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0.32;
}
html.dark .fcom_wrap .spaces .space_contents { background: transparent; }

/* 3. Top navigation: 40px pills, active state is the site's paper pill. */
.fcom_wrap .fcom_top_menu .fcom_menu_link {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 500;
  gap: 8px;
  min-height: 40px;
  padding-inline: 14px;
  transition: background 0.18s var(--bc-ease), color 0.18s var(--bc-ease);
}
.fcom_wrap .fcom_top_menu .fcom_menu_link:hover { background: var(--bc-glass); }
.fcom_wrap .fcom_top_menu .fcom_menu_link.router-link-exact-active {
  background: var(--bc-pill) !important;
  color: var(--bc-pill-text) !important;
  font-weight: 600;
}
.fcom_wrap .fcom_top_menu .fcom_menu_link svg { height: 18px; width: 18px; }
.fcom_wrap .fcom_top_menu .fhr_logo img { max-height: 34px !important; }
.fcom_wrap .fcom_top_menu .fhr_logo, .fcom_wrap .fcom_top_menu .fhr_logo .fcom_route {
  height: auto !important;
  overflow: visible !important;
}

/* 4. Sidebar: mono section labels, 44px links, glass hover, sun active. */
.fcom_wrap .spaces .space_contents .fcom_sidebar_wrap h4.space_section_title {
  color: var(--bc-fg-3);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fcom_wrap .spaces .space_contents .fcom_sidebar_wrap .fcom_menu_link {
  align-items: center;
  border-radius: var(--bc-radius-sm);
  min-height: 44px;
  transition: background 0.14s var(--bc-ease), color 0.14s var(--bc-ease);
}
.fcom_wrap .spaces .space_contents .fcom_sidebar_wrap .fcom_menu_link:hover { background: var(--bc-glass); }
.fcom_wrap .spaces .space_contents .fcom_sidebar_wrap .fcom_menu_link:is(.router-link-exact-active, .router-link-active) {
  background: var(--bc-glass);
  box-shadow: inset 3px 0 0 var(--bc-accent);
  color: var(--bc-active);
}
.fcom_wrap .spaces .space_contents .fcom_sidebar_wrap .fcom_menu_link.router-link-exact-active::before { background: var(--bc-accent); }

/* 5. Space and course icons; courses are numbered chips counted per sidebar group
 *    (.fcom_communities_menu > nav > ul), so a newly published course numbers itself. */
.fcom_sidebar_wrap .fcom_communities_menu { counter-reset: course; }
.fcom_sidebar_wrap a[href*="/community/course/"] { counter-increment: course; }
.fcom_wrap .fcom_sidebar_wrap .community_avatar {
  width: 30px !important;
  height: 30px !important;
  max-width: none !important;
  min-width: 30px !important;
  background: var(--bc-glass);
  border: 1px solid var(--bc-line);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fcom_wrap .fcom_sidebar_wrap .community_avatar .fcom_emoji { font-size: 18px !important; line-height: 1 !important; }
.fcom_wrap .fcom_sidebar_wrap a[href*="/community/course/"] .community_avatar {
  background: var(--bc-chip) !important;
  font-size: 0;
}
.fcom_wrap .fcom_sidebar_wrap a[href*="/community/course/"] .community_avatar::before {
  content: counter(course, decimal-leading-zero);
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 12px;
  color: var(--bc-chip-text);
  letter-spacing: 0.04em;
}
.fcom_wrap .fcom_sidebar_wrap a[href*="/community/course/"] .community_avatar > * { display: none; }

/* 6. Panes: composer, feed cards, right rail — hairline border, deep soft shadow. */
.fcom_wrap .fcom_feed_box, .fcom_wrap .feed_outer .feed, .fcom_wrap .fcom_side_box {
  background: var(--bc-pane-fill);
  border-radius: var(--bc-radius);
  border: 1px solid var(--bc-line);
  box-shadow: var(--bc-shadow);
}
.fcom_wrap .feed_outer .feed { transition: box-shadow 0.25s var(--bc-ease), border-color 0.25s var(--bc-ease); }
.fcom_wrap .feed_outer .feed:hover { border-color: var(--bc-line-2); box-shadow: var(--bc-shadow-hover); }
.fcom_wrap .feed_body.not_found p { color: var(--bc-fg-3); }
/* Composer input reads as a pill on the pane. Element Plus wrappers are covered
 *  alongside plain inputs; unmatched selectors are inert. */
.fcom_wrap .fcom_feed_box :is(input[type="text"], .el-input__wrapper) {
  background: var(--bc-glass);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  box-shadow: none;
  color: var(--bc-fg);
  min-height: 44px;
  padding-inline: 18px;
}
.fcom_wrap .fcom_feed_box :is(textarea, .el-textarea__inner) {
  background: var(--bc-glass);
  border: 1px solid var(--bc-line);
  border-radius: 16px;
  box-shadow: none;
  color: var(--bc-fg);
}
.fcom_wrap .fcom_feed_box :is(input, textarea)::placeholder { color: var(--bc-fg-3); opacity: 1; }

/* 7. Buttons: primary is the paper pill, danger is tamarind, everything is round. */
.fcom_wrap .el-button.fcom_primary_button,
.fcom_wrap .el-button--primary {
  background: var(--bc-pill) !important;
  border-color: transparent !important;
  border-radius: 999px !important;
  box-shadow: var(--bc-pill-shadow);
  color: var(--bc-pill-text) !important;
  font-weight: 600;
}
.fcom_wrap .el-button.fcom_primary_button:hover,
.fcom_wrap .el-button--primary:hover { background: var(--bc-pill-hover) !important; }
.fcom_wrap .el-button.fcom_secondary_button { border-radius: 999px; border-color: var(--bc-line-2); }
/* Danger keeps the darker tamarind from the WEB-102 candidate (paper text 4.69:1). */
.fcom_wrap .el-button--danger {
  --el-button-text-color: #fffaf2;
  --el-button-hover-text-color: #fffaf2;
  --el-button-active-text-color: #fffaf2;
  color: #fffaf2;
  background: #bc4f35 !important;
  border-color: #bc4f35 !important;
  border-radius: 999px !important;
}
.fcom_wrap .el-button--danger:hover, .fcom_wrap .el-button--danger:focus { background: #a8402b !important; border-color: #a8402b !important; }
.fcom_wrap a { color: var(--bc-link); }
.fcom_wrap a:hover { color: var(--bc-active); }

/* 7b. Keyboard focus stays visible on every interactive portal control. */
.fcom_wrap :is(a, button, input, select, textarea, [tabindex], .fcom_menu_link):focus-visible {
  outline: 3px solid var(--bc-active);
  outline-offset: 3px;
}

/* 8. Theme-owned sidebar link and rail widgets (inc/portal-widgets.php, mounted on
 *    fluent_community/after_portal_sidebar at the foot of the left navigation — the
 *    plugin's right column is Vue-rendered and has no PHP action). */
.fcom_side_footer[data-baanarun-community-branding] {
  border-top: 1px solid var(--bc-line);
  margin: 1rem;
  padding-top: 1rem;
}
.fcom_side_footer[data-baanarun-community-branding] a { color: var(--bc-fg-3); font-size: 12px; letter-spacing: 0.04em; }
.fcom_side_footer[data-baanarun-community-branding] a:hover { color: var(--bc-active); }

.fcom_wrap .baan-rail { display: flex; flex-direction: column; gap: 12px; margin: 18px 12px 6px; }
/* Collapsed desktop sidebar (html.fcom_sidebar_collapsed_desktop, 80px, overflow hidden):
 * the cards cannot fit, so they are hidden until the sidebar expands. The plugin scopes
 * that state to min-width 1025px and the class persists when the viewport narrows, so the
 * mobile drawer keeps the cards. */
@media (min-width: 1025px) {
  html.fcom_sidebar_collapsed_desktop .fcom_wrap .baan-rail { display: none; }
}
.fcom_wrap .baan-widget {
  background: var(--bc-pane-fill);
  border: 1px solid var(--bc-line);
  border-radius: 18px;
  box-shadow: var(--bc-shadow);
  color: var(--bc-fg-2);
  margin: 0;
  padding: 18px;
}
.fcom_wrap .baan-widget__row { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.fcom_wrap .baan-widget__row--start { align-items: center; justify-content: flex-start; margin: 0 0 10px; }
.fcom_wrap .baan-widget__meta--sun { color: var(--bc-active); letter-spacing: 0.04em; text-transform: none; }
.fcom_wrap .baan-widget__title--small { font-size: 13.5px; font-weight: 500; margin: 0; }
.fcom_wrap .baan-widget__kicker {
  color: var(--bc-fg-3);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.fcom_wrap .baan-widget__title {
  color: var(--bc-fg);
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 6px;
}
.fcom_wrap .baan-widget__meta {
  color: var(--bc-fg-3);
  font-size: 11px;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.fcom_wrap .baan-widget__body {
  color: var(--bc-fg-2);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 14px;
}
.fcom_wrap .baan-widget__body strong { color: var(--bc-fg); font-weight: 600; }
.fcom_wrap .baan-progress {
  background: var(--bc-glass);
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  height: 8px;
  margin: 0 0 14px;
  overflow: hidden;
}
.fcom_wrap .baan-progress__fill {
  background: linear-gradient(90deg, var(--bc-accent), var(--bc-active));
  border-radius: 999px;
  display: block;
  height: 100%;
}
.fcom_wrap .baan-pill {
  align-items: center;
  background: var(--bc-pill);
  border-radius: 999px;
  box-shadow: var(--bc-pill-shadow);
  color: var(--bc-pill-text);
  display: inline-flex;
  font-size: 14px;
  font-weight: 600;
  justify-content: center;
  min-height: 40px;
  padding-inline: 18px;
  text-decoration: none;
}
.fcom_wrap .baan-pill:hover { background: var(--bc-pill-hover); color: var(--bc-pill-text); }
.fcom_wrap .baan-widget__link { font-size: 14px; font-weight: 500; }
.fcom_wrap .baan-avatars { display: flex; flex: 0 0 auto; margin: 0; padding-left: 8px; }
.fcom_wrap .baan-avatars img {
  background: var(--bc-glass);
  border: 2px solid var(--bc-pane);
  border-radius: 999px;
  height: 32px;
  margin-left: -8px;
  width: 32px;
}

/* 9. Phone (≤ 768px): 60px bar, single column, 22px panes, 44px targets. */
@media (max-width: 768px) {
  .fcom_wrap .fcom_top_menu { min-height: 60px; }
  .fcom_wrap .fcom_top_menu .fcom_menu_link { min-height: 44px; padding-inline: 12px; }
  .fcom_wrap .fcom_feed_box, .fcom_wrap .feed_outer .feed, .fcom_wrap .fcom_side_box, .fcom_wrap .baan-widget {
    border-radius: var(--bc-radius);
  }
  .fcom_wrap .baan-rail { margin: 14px 10px 6px; }
  .fcom_wrap .baan-pill { min-height: 44px; }
  html.dark .fcom_wrap::before { background-size: 100% 18vh, 100% 26vh, 100% 100%, 100% 100%; }
}

/* 10. Feed cards: mono meta line, hairline reaction row, chips (artboard "Community feed"). */
.fcom_wrap .feed_outer .feed { padding: 22px 24px; }
.fcom_wrap .feed_outer .feed .feed_user_name,
.fcom_wrap .feed_outer .feed .feed_user_name a { color: var(--bc-fg); font-size: 14.5px; font-weight: 600; }
.fcom_wrap .feed_outer .feed .feed_meta_info,
.fcom_wrap .feed_outer .feed .feed_timestamp,
.fcom_wrap .feed_outer .feed .feed_meta_info a { color: var(--bc-fg-3); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: 0.04em; }
.fcom_wrap .feed_outer .feed .feed_title_heading,
.fcom_wrap .feed_outer .feed .feed_title_heading a { color: var(--bc-fg); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.fcom_wrap .feed_outer .feed .feed_body,
/* Feed post bodies are long-form reading, the same as a lesson: match .fcom_lesson_content
 * at 15.5px/1.7 rather than the 14.5px/1.65 label scale. The author name above stays
 * 14.5px -- it is a label, not prose. */
.fcom_wrap .feed_outer .feed .feed_texts { color: var(--bc-fg-2); font-size: 15.5px; line-height: 1.7; }
.fcom_wrap .feed_outer .feed .feed_texts :is(h1, h2, h3, h4) { color: var(--bc-fg); }
.fcom_wrap .feed_outer .feed .feed_footer,
.fcom_wrap .feed_outer .feed .feed_reaction_meta { border-top: 1px solid var(--bc-line); color: var(--bc-fg-3); font-size: 13px; margin-top: 12px; padding-top: 10px; }
.fcom_wrap .feed_outer .feed .feed_footer :is(button, a) { border-radius: 999px; color: var(--bc-fg-3); min-height: 36px; }
.fcom_wrap .feed_outer .feed .feed_footer :is(button, a):hover { background: var(--bc-glass); color: var(--bc-fg); }
.fcom_wrap .feed_outer .feed .feed_status,
.fcom_wrap .feed_outer .feed .feed_space_name { background: rgba(246, 240, 228, 0.085); border: 1px solid var(--bc-line); border-radius: 999px; color: var(--bc-fg-2); display: inline-flex; font-size: 12.5px; font-weight: 500; padding: 4px 12px; }
.fcom_wrap .fcom_feed_divider { border-color: var(--bc-line); }
.fcom_wrap .feed_filters,
.fcom_wrap .fcom_feed_filter_label { color: var(--bc-fg-2); font-size: 15px; font-weight: 500; }
.fcom_wrap .fcom_feed_filter_trigger,
.fcom_wrap .fcom_feed_filter_group_list .fcom_feed_filter_value { border: 1px solid var(--bc-line); border-radius: 999px; color: var(--bc-fg-2); font-size: 12.5px; font-weight: 500; padding: 5px 13px; }
.fcom_wrap .fcom_feed_filter_trigger:hover { border-color: var(--bc-line-2); color: var(--bc-fg); }
.fcom_wrap .feed_comment_input,
.fcom_wrap .feed_commenting :is(input, textarea, .el-textarea__inner) { background: rgba(246, 240, 228, 0.045); border: 1px solid var(--bc-line); border-radius: 999px; color: var(--bc-fg); min-height: 44px; }
.fcom_wrap .feed_commenting :is(input, textarea)::placeholder { color: var(--bc-fg-3); opacity: 1; }

/* 11. Welcome strip: FluentCommunity's logged-in welcome banner (setting written by
 *     scripts/configure-blocksy.php) rendered as the Founding Member pane. */
.fcom_wrap .fcom_welcome_box {
  background: linear-gradient(135deg, rgba(217, 93, 63, 0.16), rgba(246, 240, 228, 0.03) 55%), var(--bc-pane);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  color: var(--bc-fg-2);
  padding: 22px 26px;
  position: relative;
}
html:not(.dark) .fcom_wrap .fcom_welcome_box { background: linear-gradient(135deg, rgba(217, 93, 63, 0.08), rgba(255, 255, 255, 0) 55%), var(--bc-pane); }
.fcom_wrap .fcom_welcome_box::before {
  align-items: center;
  color: var(--bc-fg-3);
  content: "Founding Member";
  display: flex;
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  gap: 10px;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.fcom_wrap .fcom_welcome_box::after {
  background: var(--bc-active);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(245, 201, 94, 0.8);
  content: "";
  height: 6px;
  left: 26px;
  position: absolute;
  top: 28px;
  width: 6px;
}
.fcom_wrap .fcom_welcome_box::before { padding-left: 16px; }
.fcom_wrap .fcom_welcome_box .fcom_welcome_title,
.fcom_wrap .fcom_welcome_box .fcom_welcome_title * { color: var(--bc-fg); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 8px; }
.fcom_wrap .fcom_welcome_box .fcom_welcome_sub,
.fcom_wrap .fcom_welcome_box .fcom_welcome_sub p { color: var(--bc-fg-2); font-size: 14px; line-height: 1.55; margin: 0; }
.fcom_wrap .fcom_welcome_box .fcom_welcome_cta_buttons { margin-top: 14px; }
.fcom_wrap .fcom_welcome_box .fcom_welcome_cta_buttons .el-button,
.fcom_wrap .fcom_welcome_box .fcom_welcome_cta_buttons a.el-button { background: var(--bc-pill) !important; border-color: transparent !important; border-radius: 999px !important; box-shadow: var(--bc-pill-shadow); color: var(--bc-pill-text) !important; font-weight: 600; min-height: 44px; padding-inline: 22px; }
.fcom_wrap .fcom_welcome_box .fcom_welcome_close { color: var(--bc-fg-3); }
/* 2.9.1 wraps the banner's title, sub and CTA in an unnamed <div> inside .fcom_welcome_box
 * -- that wrapper is what the old `.fcom_welcome_content { flex: 1 }` rule was written for,
 * but in this version it carries class="", so nothing matched and the three parts stacked.
 * The "Founding Member" ::before kicker stays on the box itself, above the wrapper; the
 * wrapper lays the text out against the CTA. :has() scopes this to the content wrapper so a
 * banner-media sibling div is not caught. */
@media (min-width: 900px) {
  .fcom_wrap .fcom_welcome_box > div:has(> .fcom_welcome_title) { align-items: center; column-gap: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .fcom_wrap .fcom_welcome_box > div > .fcom_welcome_title { grid-column: 1; grid-row: 1; }
  .fcom_wrap .fcom_welcome_box > div > .fcom_welcome_sub { grid-column: 1; grid-row: 2; }
  .fcom_wrap .fcom_welcome_box > div > .fcom_welcome_cta_buttons { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}

/* 12. The plugin's own right column (Vue): its widgets become panes; course progress
 *     uses the tamarind→sun bar. */
.fcom_wrap .fcom_main_side_wrap .fcom_side_box .app_side_widget {
  background: var(--bc-pane-fill);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  margin-bottom: 20px;
  padding: 22px;
}
.fcom_wrap .fcom_main_side_wrap .app_side_widget .widget_header,
.fcom_wrap .fcom_main_side_wrap .app_side_widget .widget_header * { color: var(--bc-fg-3); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.fcom_wrap .fcom_main_side_wrap .app_side_widget .widget_body { color: var(--bc-fg-2); font-size: 13.5px; line-height: 1.55; }
.fcom_wrap .fcom_main_side_wrap .app_side_widget .progress_label { color: var(--bc-active); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.fcom_wrap .el-progress-bar__outer { background: rgba(246, 240, 228, 0.085) !important; border-radius: 999px; height: 6px !important; }
.fcom_wrap .el-progress-bar__inner { background: linear-gradient(90deg, var(--bc-accent), var(--bc-active)) !important; border-radius: 999px; box-shadow: 0 0 12px rgba(245, 201, 94, 0.5); }

/* 13. Course catalog cards (.fcom_courses .fcom_box_card_list, artboard "Courses"):
 *     16:9 media with a fade to the pane, numbered index chip, 21px title, mono meta. */
.fcom_wrap .fcom_courses .fcom_box_card_list { counter-reset: baan-course; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.fcom_wrap .fcom_courses .fcom_box_card_list > * {
  background: var(--bc-pane-fill);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  counter-increment: baan-course;
  display: flex;
  flex-direction: column;
  overflow: clip;
  position: relative;
  transition: border-color 0.25s var(--bc-ease), box-shadow 0.25s var(--bc-ease), transform 0.25s var(--bc-ease);
}
.fcom_wrap .fcom_courses .fcom_box_card_list > *:hover { border-color: var(--bc-line-2); box-shadow: var(--bc-shadow-hover); transform: translateY(-2px); }
.fcom_wrap .fcom_courses .fcom_box_card_list > *::before {
  color: var(--bc-fg);
  content: counter(baan-course, decimal-leading-zero);
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  left: 20px;
  letter-spacing: 0.12em;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: 18px;
  z-index: 2;
}
.fcom_wrap .fcom_courses .fcom_box_card_list img,
.fcom_wrap .fcom_courses .fcom_box_card_list .fcom_no_image { aspect-ratio: 16 / 9; display: block; object-fit: cover; width: 100%; }
.fcom_wrap .fcom_courses .fcom_box_card_list .fcom_no_image { background: radial-gradient(120% 90% at 20% 100%, rgba(245, 201, 94, 0.45), transparent 55%), radial-gradient(90% 70% at 90% 10%, rgba(217, 93, 63, 0.5), transparent 60%), #16302b; }
.fcom_wrap .fcom_courses .fcom_box_card_list > *:nth-child(3n + 2) .fcom_no_image { background: radial-gradient(110% 80% at 80% 100%, rgba(185, 216, 204, 0.35), transparent 55%), radial-gradient(80% 60% at 10% 0%, rgba(217, 93, 63, 0.35), transparent 60%), var(--bc-glass); }
.fcom_wrap .fcom_courses .fcom_box_card_list > *:nth-child(3n) .fcom_no_image { background: radial-gradient(100% 80% at 50% 110%, rgba(245, 201, 94, 0.4), transparent 60%), var(--bc-pane); }
.fcom_wrap .fcom_courses .fcom_box_card_list > * > :is(a, div):first-child { position: relative; }
.fcom_wrap .fcom_courses .fcom_box_card_list > * > :is(a, div):first-child::after { background: linear-gradient(180deg, rgba(12, 21, 19, 0.1) 0%, rgba(12, 21, 19, 0.35) 55%, var(--bc-pane) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.fcom_wrap .fcom_courses .fcom_box_card_info { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 4px 24px 24px; }
.fcom_wrap .fcom_courses .fcom_box_card_name,
.fcom_wrap .fcom_courses .fcom_box_card_name a { color: var(--bc-fg); font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.fcom_wrap .fcom_courses .fcom_box_card_details { color: var(--bc-fg-2); font-size: 14px; line-height: 1.6; }
.fcom_wrap .fcom_courses .fcom_box_card_details .inline_details,
.fcom_wrap .fcom_courses .fcom_course_info { color: var(--bc-fg-3); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: 0.04em; }
.fcom_wrap .fcom_courses .fcom_course_labels { display: flex; flex-wrap: wrap; gap: 6px; position: absolute; right: 16px; top: 14px; z-index: 2; }
.fcom_wrap .fcom_courses .fcom_course_labels > * { background: rgba(7, 12, 11, 0.55); border: 1px solid rgba(245, 201, 94, 0.25); border-radius: 999px; color: var(--bc-active); font-size: 12px; font-weight: 500; padding: 4px 11px; }
.fcom_wrap .fcom_courses .fcom_course_progress_footer { border-top: 1px solid var(--bc-line); color: var(--bc-active); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; margin-top: auto; padding-top: 12px; }
.fcom_wrap .fcom_courses .fcom_box_card_info .el-button,
.fcom_wrap .fcom_courses .fcom_box_card_info .fcom_primary_button { align-self: flex-start; margin-top: auto; }

/* 14. Lesson view (artboard "Lesson"): sticky curriculum pane, 28px content pane,
 *     mono section labels, 44px lessons with tick circles, tamarind current state. */
.fcom_wrap .fcom_lesson_wrap { gap: 32px; }
.fcom_wrap .fcom_lesson_sidebar {
  align-self: start;
  background: var(--bc-pane-fill);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow);
  padding: 20px 14px;
  position: sticky;
  top: 24px;
}
/* Curriculum markup (2.9.1 app.js): .fcom_lesson_sidebar > sections (.fcom_active_topic when
 * open) > .fcom_section_items > .fcom_section_item (.is_locked) > .fcom_section_item_title (div). */
.fcom_wrap .fcom_lesson_sidebar .fcom_section_sidebar_title,
.fcom_wrap .fcom_lesson_sidebar .fcom_section_primary_item_title,
.fcom_wrap .fcom_lesson_sidebar .fcom_heading_item { color: var(--bc-fg-3); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; padding: 10px 12px 4px; text-transform: uppercase; }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_items { display: flex; flex-direction: column; gap: 4px; }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item .fcom_section_item_title { align-items: center; border-radius: var(--bc-radius-sm); color: var(--bc-fg-2); cursor: pointer; display: flex; font-size: 13.5px; font-weight: 500; gap: 12px; min-height: 44px; padding: 0 12px; transition: background 0.14s var(--bc-ease), color 0.14s var(--bc-ease); }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item .fcom_section_item_title p { margin: 0; }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item .fcom_section_item_title:hover { background: var(--bc-glass); color: var(--bc-fg); }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item.fcom_current_lesson .fcom_section_item_title,
.fcom_wrap .fcom_lesson_sidebar .fcom_current_lesson .fcom_section_item_title,
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item_title.fcom_current_lesson { background: var(--bc-glass); box-shadow: inset 3px 0 0 var(--bc-accent); color: var(--bc-fg); }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item.is_locked .fcom_section_item_title { color: var(--bc-fg-3); }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item .fcom_section_item_title .el-icon { align-items: center; border: 1px solid var(--bc-line-2); border-radius: 50%; color: var(--bc-active); display: inline-flex; flex: 0 0 auto; height: 22px; justify-content: center; width: 22px; }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item.is_locked .fcom_section_item_title .el-icon { color: var(--bc-fg-3); }
.fcom_wrap .fcom_lesson_sidebar .fcom_section_item_title:focus-visible { outline: 3px solid var(--bc-active); outline-offset: 2px; }
/* The pane is .fcom_lesson_details only: .fcom_lesson_container is the plugin's
 * viewport-sized (100dvh) scroller in fullscreen mode and must keep no padding. */
.fcom_wrap .fcom_lesson_details {
  background: var(--bc-pane-fill);
  border: 1px solid var(--bc-line);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow);
  padding: 40px 44px;
}
.fcom_wrap .fcom_lesson_header { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.fcom_wrap .fcom_lesson_header .fcom_lesson_number { align-items: center; color: var(--bc-fg-3); display: flex; font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 500; gap: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.fcom_wrap .fcom_lesson_header .fcom_lesson_number::before { background: var(--bc-active); border-radius: 50%; box-shadow: 0 0 12px rgba(245, 201, 94, 0.8); content: ""; height: 6px; width: 6px; }
.fcom_wrap .fcom_lesson_header .fcom_lesson_title { margin: 0; }
/* Only the heading itself: .fcom_lesson_title also wraps the lesson-number line and the
 * admin "Edit Lesson" button, which keep their own type. */
.fcom_wrap .fcom_lesson_header .fcom_lesson_title :is(h1, h2, h3) { color: var(--bc-fg); font-size: 36px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.fcom_wrap .fcom_lesson_body,
.fcom_wrap .fcom_lesson_content { color: rgba(246, 240, 228, 0.86); font-size: 15.5px; line-height: 1.7; }
html:not(.dark) .fcom_wrap .fcom_lesson_body, html:not(.dark) .fcom_wrap .fcom_lesson_content { color: var(--bc-fg-2); }
.fcom_wrap .fcom_lesson_body :is(h1, h2, h3),
.fcom_wrap .fcom_lesson_content :is(h1, h2, h3) { color: var(--bc-fg); font-size: 22px; letter-spacing: -0.02em; margin: 26px 0 12px; }
.fcom_wrap .fcom_lesson_body :is(h1, h2, h3):first-child { margin-top: 0; }
.fcom_wrap .fcom_lesson_body :is(ol, ul) { padding-left: 22px; }
.fcom_wrap .fcom_lesson_body li { margin-bottom: 10px; }
.fcom_wrap .fcom_lesson_body strong { color: var(--bc-fg); }
/* Editor-managed callouts (WEB-117 lesson content): a two-up outcome / evidence pair and a practice pane. */
.fcom_wrap .fcom_lesson_body .baan-callouts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 26px; }
.fcom_wrap .fcom_lesson_body .baan-callout { background: rgba(246, 240, 228, 0.045); border: 1px solid var(--bc-line); border-radius: 18px; padding: 18px 20px; }
.fcom_wrap .fcom_lesson_body .baan-callout > :first-child { color: var(--bc-fg-3); font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: 0.14em; margin: 0 0 8px; text-transform: uppercase; }
.fcom_wrap .fcom_lesson_body .baan-callout p:last-child { color: var(--bc-fg); font-size: 14.5px; line-height: 1.55; margin: 0; }
.fcom_wrap .fcom_lesson_body .baan-practice { background: linear-gradient(135deg, rgba(217, 93, 63, 0.14), rgba(246, 240, 228, 0.03) 60%); border: 1px solid var(--bc-line); border-radius: 18px; margin: 26px 0; padding: 22px 24px; }
.fcom_wrap .fcom_lesson_nav { align-items: center; border-top: 1px solid var(--bc-line); display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; padding-top: 22px; }
.fcom_wrap .fcom_lesson_nav .el-button:not(.fcom_primary_button):not(.el-button--primary) { background: rgba(246, 240, 228, 0.085); border: 1px solid var(--bc-line-2); border-radius: 999px; box-shadow: 0 1px 0 rgba(246, 240, 228, 0.06) inset; color: var(--bc-fg); min-height: 44px; }
.fcom_wrap .fcom_lesson_comments,
.fcom_wrap .fcom_course_comments { background: var(--bc-pane-fill); border: 1px solid var(--bc-line); border-radius: var(--bc-radius); box-shadow: var(--bc-shadow); margin-top: 22px; padding: 24px 26px; }
.fcom_wrap .fcom_lesson_comments :is(h2, h3, h4) { color: var(--bc-fg); font-size: 16px; }
.fcom_wrap .fcom_lesson_comment_box :is(input, textarea, .el-textarea__inner) { background: rgba(246, 240, 228, 0.045); border: 1px solid var(--bc-line); border-radius: 18px; color: var(--bc-fg); }
.fcom_wrap .fcom_lesson_comment_box :is(input, textarea)::placeholder { color: var(--bc-fg-3); opacity: 1; }
.fcom_wrap .fcom_course_view_layout .fcom_course_intro,
.fcom_wrap .fcom_course_details { background: var(--bc-pane-fill); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-lg); box-shadow: var(--bc-shadow); }
@media (max-width: 1024px) {
  .fcom_wrap .fcom_lesson_sidebar { position: static; }
  .fcom_wrap .fcom_lesson_details { padding: 26px 22px; }
  .fcom_wrap .fcom_lesson_header .fcom_lesson_title :is(h1, h2, h3) { font-size: 28px; }
}

/* 15. Phone bottom tab bar (.fcom_mobile_menu, artboard "phone"): glass, 44px targets, sun active.
 *     The plugin teleports this menu into <body>, outside .fcom_wrap, so the --bc-* tokens
 *     are not inherited: paired values are declared on the menu itself. */
.fcom_mobile_menu {
  /* Opaque, not glass: at 0.92 the feed scrolled through the bar and the icons lost
   * contrast on a phone -- worse now the dawn backdrop is visible behind it. */
  --baan-tab-bg: #070c0b;
  --baan-tab-line: rgba(246, 240, 228, 0.08);
  --baan-tab-fg: rgba(246, 240, 228, 0.56);
  --baan-tab-fg-hover: #fffaf2;
  --baan-tab-active: #f5c95e;
  background: var(--baan-tab-bg) !important;
  border-top: 1px solid var(--baan-tab-line) !important;
}
html:not(.dark) .fcom_mobile_menu {
  --baan-tab-bg: #fbf6ec;
  --baan-tab-line: rgba(22, 48, 43, 0.12);
  --baan-tab-fg: #3d4a45;
  --baan-tab-fg-hover: #16302b;
  --baan-tab-active: #a8402b;
}
.fcom_mobile_menu .focm_menu_items { padding: 8px 10px 16px; }
.fcom_mobile_menu .focm_menu_items .focm_menu_item { border-radius: 12px; color: var(--baan-tab-fg); flex-direction: column; font-size: 10.5px; font-weight: 500; gap: 4px; min-height: 44px; padding: 6px 4px; }
.fcom_mobile_menu .focm_menu_items .focm_menu_item svg { height: 22px; width: 22px; }
.fcom_mobile_menu .focm_menu_items .focm_menu_item:hover { background: transparent; color: var(--baan-tab-fg-hover); }
.fcom_mobile_menu .focm_menu_items .focm_menu_item.router-link-active,
.fcom_mobile_menu .focm_menu_items .focm_menu_item.active { color: var(--baan-tab-active); }
.fcom_mobile_menu .focm_menu_items .focm_menu_item:focus-visible { outline: 3px solid var(--baan-tab-active); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fcom_wrap .fcom_top_menu .fcom_menu_link,
  .fcom_wrap .spaces .space_contents .fcom_sidebar_wrap .fcom_menu_link,
  .fcom_wrap .feed_outer .feed { transition: none; }
}