/* ExNiLingo Tabs — notebook index tabs in the ExNiLingo canopy look, for the header menu,
 * space tabs and profile tabs. Colours come from the Canopy theme snippet (--exn-*) when it is
 * active, with the same values as fallbacks; html.dark switches to the night palette.
 * FluentCommunity's own rows are kept, hidden (.exst_hidden). */

.exst_hidden { display: none !important; }
.fcom_space_menu_nav.exst_on, .object_menu.exst_on { overflow: visible !important; height: auto !important; }

.exst, .exst_flat {
  --t-paper: var(--exn-card, rgba(255, 253, 247, .94));
  --t-back: rgba(228, 239, 216, .75);
  --t-ink: var(--exn-ink, #16291F);
  --t-muted: var(--exn-muted, #4B6352);
  --t-line: var(--exn-line, #D3E2C6);
  --t-leaf: var(--exn-leaf, #2F6E46);
  --t-lagoon: var(--exn-lagoon, #0E7C74);
  --t-gold: #B9741A;
  --t-accent: var(--exn-accent, #C63D27);
  --t-violet: #6E4BD8;
  --t-bark: #7A6A48;
  width: 100%;
  font-family: 'Nunito Sans', var(--fcom-font-family, system-ui), sans-serif;
}
html.dark .exst, html.dark .exst_flat {
  --t-paper: var(--exn-card, rgba(21, 39, 29, .92));
  --t-back: rgba(12, 26, 19, .7);
  --t-ink: var(--exn-ink, #EEF3E6);
  --t-muted: var(--exn-muted, #A9BCA9);
  --t-line: var(--exn-line, #2A4433);
  --t-leaf: #9BCB7A;
  --t-lagoon: var(--exn-lagoon, #4FD1C5);
  --t-gold: #F6C453;
  --t-accent: #FF8A5C;
  --t-violet: #B9A4FF;
  --t-bark: #C9BC97;
}
.exst [data-color="leaf"] { --c: var(--t-leaf); }
.exst [data-color="lagoon"] { --c: var(--t-lagoon); }
.exst [data-color="gold"] { --c: var(--t-gold); }
.exst [data-color="accent"] { --c: var(--t-accent); }
.exst [data-color="violet"] { --c: var(--t-violet); }
.exst [data-color="muted"] { --c: var(--t-bark); }

/* The paper tabs */
.exst_row { display: flex; align-items: flex-end; gap: 6px; margin: 0; padding: 0 4px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.exst_row::-webkit-scrollbar { display: none; }
.exst_li { flex: none; margin: 0; padding: 0; list-style: none; }
.exst_tab {
  --c: var(--t-leaf);
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px 14px 0 0;
  background: var(--t-back); color: var(--t-muted) !important; text-decoration: none !important;
  font-family: 'Fraunces', Georgia, serif; font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; transform: translateY(4px); transition: transform .15s ease, background .15s ease;
  backdrop-filter: blur(6px);
}
.exst_tab:hover { color: var(--t-ink) !important; transform: translateY(2px); }
.exst_tab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.exst_tab.is_current, .exst_tab.is_open {
  background: var(--t-paper); color: var(--t-ink) !important; transform: translateY(1px); z-index: 2;
  box-shadow: inset 0 3px 0 var(--c), 0 -6px 14px -10px rgba(22, 41, 31, .45);
}
.exst_dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.exst_count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  font-family: 'Nunito Sans', sans-serif; font-size: 11.5px; font-weight: 800;
  background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c);
}
.exst_emoji { font-size: 15px; }

/* The page under the tabs, with a group's tabs as a second row */
.exst_page {
  position: relative; z-index: 1; height: 6px;
  border-radius: 4px 14px 0 0; background: var(--t-paper);
}
.exst_page.has_sub { height: auto; padding: 12px 14px 12px; border-radius: 4px 18px 18px 18px; box-shadow: 0 10px 24px -20px rgba(22, 41, 31, .6); }
.exst_sub { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.exst_sub li { margin: 0; padding: 0; list-style: none; }
.exst_pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px;
  color: var(--t-ink) !important; text-decoration: none !important; font-size: 14.5px; font-weight: 800;
  box-shadow: inset 0 0 0 1.5px var(--t-line);
}
.exst_pill:hover { box-shadow: inset 0 0 0 1.5px var(--c); }
.exst_pill.is_current { background: var(--c); color: #fff !important; box-shadow: none; }
html.dark .exst_pill.is_current { color: #0C1A13 !important; }

/* Phones: the list in FluentCommunity's space menu, grouped */
.fcom_space_menu_nav.exst_on > .fcom_space_menu_ul.fcom_space_menu_overflow { display: none !important; }
.exst_flat {
  --t-ink: var(--exn-ink, #16291F); --t-muted: var(--exn-muted, #4B6352);
  --t-leaf: var(--exn-leaf, #2F6E46); --t-lagoon: var(--exn-lagoon, #0E7C74); --t-gold: #B9741A; --t-accent: var(--exn-accent, #C63D27); --t-violet: #6E4BD8; --t-bark: #7A6A48;
  margin: 0; padding: 4px 0; list-style: none; font-family: 'Nunito Sans', var(--fcom-font-family, system-ui), sans-serif;
}
html.dark .exst_flat { --t-ink: var(--exn-ink, #EEF3E6); --t-muted: var(--exn-muted, #A9BCA9); --t-leaf: #9BCB7A; --t-lagoon: #4FD1C5; --t-gold: #F6C453; --t-accent: #FF8A5C; --t-violet: #B9A4FF; --t-bark: #C9BC97; }
.exst_flat [data-color="leaf"] { --c: var(--t-leaf); }
.exst_flat [data-color="lagoon"] { --c: var(--t-lagoon); }
.exst_flat [data-color="gold"] { --c: var(--t-gold); }
.exst_flat [data-color="accent"] { --c: var(--t-accent); }
.exst_flat [data-color="violet"] { --c: var(--t-violet); }
.exst_flat [data-color="muted"] { --c: var(--t-bark); }
.exst_flat li { margin: 0; padding: 0; list-style: none; }
.exst_flat_link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--t-ink) !important; text-decoration: none !important; font-weight: 700; font-size: 15px; }
.exst_flat_link:hover { background: var(--fcom-active-bg, rgba(0,0,0,.04)); }
.exst_flat_link.is_current { background: var(--fcom-active-bg, rgba(0,0,0,.06)); box-shadow: inset 3px 0 0 var(--c, var(--t-leaf)); }
.exst_flat_head { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 14px 2px; font-family: 'Fraunces', Georgia, serif; font-size: 14px; font-weight: 700; color: var(--t-muted); }
.exst_flat_in .exst_flat_link { padding-left: 32px; font-weight: 600; }

/* "plain" look: same groups, FluentCommunity's own colours, no paper */
.exst_plain .exst_tab { font-family: inherit; font-size: 15px; border-radius: 10px 10px 0 0; background: transparent; backdrop-filter: none; }
.exst_plain .exst_tab.is_current, .exst_plain .exst_tab.is_open { background: var(--fcom-primary-bg, #fff); box-shadow: inset 0 2px 0 var(--fcom-primary-button, #333); }
.exst_plain .exst_page { background: var(--fcom-primary-bg, #fff); }

@media (max-width: 700px) {
  .exst_tab { min-height: 42px; padding: 0 14px; font-size: 15px; }
  .exst_page.has_sub { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { .exst_tab { transition: none; } }

/* Profile tabs: a full-width row under the profile header */
.object_menu.exst_on { width: 100%; }
.exst_profile { padding-top: 6px; }

/* Header menu: tabs hanging from the bottom of the top bar; a group opens a paper sheet */
.fcom_top_menu .top_menu_center { overflow: visible !important; }
.exst_header { width: auto; height: 100%; display: flex; align-items: flex-end; }
.exst_header .exst_row { overflow: visible; padding: 0; gap: 4px; align-items: flex-end; }
.exst_header .exst_tab { min-height: 40px; padding: 0 15px; font-size: 15px; transform: translateY(0); border-radius: 12px 12px 0 0; }
.exst_header .exst_tab:hover { transform: translateY(-2px); }
.exst_header .exst_tab.router-link-exact-active, .exst_header .exst_tab.router-link-active, .exst_header .exst_tab.is_current, .exst_header .is_open > .exst_tab {
  background: var(--fcom-secondary-bg, var(--exn-ground, #EEF4E4)); color: var(--t-ink) !important;
  box-shadow: inset 0 3px 0 var(--c); transform: translateY(1px);
}
.exst_header .exst_tab .community_name { font: inherit; }
.exst_header .exst_tab .fcom_menu_link_icon, .exst_header .exst_tab i.el-icon { width: 16px; height: 16px; }
.exst_has_sheet { position: relative; }
.exst_sheet {
  display: none; position: absolute; z-index: 1000; top: calc(100% + 2px); left: 0; min-width: 210px;
  margin: 0; padding: 8px; list-style: none; border-radius: 4px 16px 16px 16px;
  background: var(--t-paper); box-shadow: 0 16px 34px -16px rgba(22, 41, 31, .6); backdrop-filter: blur(8px);
}
.is_open > .exst_sheet { display: flex; flex-direction: column; gap: 4px; }
.exst_sheet li { margin: 0; padding: 0; list-style: none; }
.exst_sheet .exst_pill { display: flex; width: 100%; box-sizing: border-box; min-height: 42px; padding: 0 14px; border-radius: 12px; box-shadow: none; }
.exst_sheet .exst_pill:hover { background: color-mix(in srgb, var(--c) 12%, transparent); }
.exst_sheet .exst_pill.router-link-exact-active, .exst_sheet .exst_pill.router-link-active { background: var(--c); color: #fff !important; }
html.dark .exst_sheet .exst_pill.router-link-exact-active, html.dark .exst_sheet .exst_pill.router-link-active { color: #0C1A13 !important; }
.exst_sheet .exst_pill .community_name { font: inherit; }

/* One font for every tab, whether FluentCommunity made it a link or we made it a button */
.exst .exst_tab, .exst .exst_tab .exst_label, .exst .exst_tab .community_name { font-family: 'Fraunces', Georgia, serif !important; font-weight: 700 !important; letter-spacing: 0; }
.exst .exst_pill, .exst .exst_pill .community_name, .exst .exst_count, .exst_flat_link { font-family: 'Nunito Sans', var(--fcom-font-family, system-ui), sans-serif !important; }
.exst_plain .exst_tab, .exst_plain .exst_tab .exst_label, .exst_plain .exst_tab .community_name { font-family: inherit !important; }