/* RevivalRO Freya wiki template "freya": the page frame's own parts (fyw-), on top of the main site's freya.css (copied
   unchanged next to this file; https://freya.ragnarevival.com/themes/freya/css/freya.css). Tokens (--violet-500 ...) and
   components (fy-*) are the main site's; this file adds only what the wiki has and the main site does not, built from
   those tokens and values:
     1. shell glue        the wiki as the current item of the menus, drawer and dock; the kit's header fix under 360 px;
                          the header without JavaScript (menus on hover / focus, the drawer by :target)
     2. page head         the wiki's name with the h1's look (the page's one h1 is the wiki page's own), the breadcrumb
     3. wiki bar          the wiki's places as the main site's sub navigation, the search, the live suggestions
     4. row               the trace, the page tools as the kit's chips (.fy-chip, as panel.css draws them)
     5. content grid      the content column and the table of contents column (sticky from 1100 px)
     6. page foot         DokuWiki's page info and Back to top
     7. editor row        the wiki session (Wiki editor / Wiki account, Admin, Update profile, the name, Log out)
     8. dialog            the kit's dialog parts (head, content, foot) for the New page dialog
     9. footer            the wiki's five links and copyright in the main site's legal block
    10. print
   Static file: it does NOT go through DokuWiki's css.php (modern CSS is fine here). Linked after DokuWiki's bundle, so the
   frame keeps its look; inside #dokuwiki__content it styles only the page foot (.fyw-pageinfo). */

/* 1. Shell glue -------------------------------------------------------------------------------------------------------- */
/* Community > Wiki and guides is this site: marked like the current page in the menu card and the drawer (the market and
   the panels do the same for their own item); the quick dock's Guide too (the main site marks aria-current="page"). */
.fy-menu__link[aria-current="true"] { background: rgba(140, 87, 248, .18); }
.fy-drawer__links a[aria-current="true"] { background: rgba(255, 255, 255, .06); color: var(--text); }
.fy-dock__link[aria-current="true"] { color: var(--gold-200); }
/* The drawer's Log in spans both columns (the main site sets it inline). */
.fyw-drawer-login { grid-column: 1 / -1; }
/* Narrow phones (under 360 px): the kit's fix of the main site's header row (it is 4 px too wide there). */
@media (max-width: 359.98px) {
	.fy-header__inner { gap: var(--sp-2); }
	.fy-brand { margin-right: 0; }
	.fy-header__actions { gap: .35rem; }
}
/* Without JavaScript (freya.js opens the menus and the drawer): the menus open on hover and keyboard focus, and a link
   twin of the burger opens the drawer through #fy-drawer (:target). */
.fyw-burger--nojs { display: none; }
@media (max-width: 1099.98px) {
	.no-js .fyw-burger--nojs { display: inline-grid; }
	.no-js .fy-burger[data-fy-drawer-open] { display: none; }
}
.no-js .fy-drawer:target { visibility: visible; pointer-events: auto; }
.no-js .fy-drawer:target .fy-drawer__scrim { opacity: 1; }
.no-js .fy-drawer:target .fy-drawer__panel { transform: none; }
.no-js .fy-nav__item:hover > .fy-menu, .no-js .fy-nav__item:focus-within > .fy-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }

/* 2. Page head --------------------------------------------------------------------------------------------------------- */
/* The wiki's name in the main site's page-head h1 look (freya.css h1 + .fy-pagehead h1); it is a paragraph: the page's one
   h1 is the wiki page's own first heading. */
.fyw-pagehead__title {
	margin: 0;
	color: var(--text);
	font: 600 var(--fs-h1)/var(--lh-tight) var(--font-display);
	letter-spacing: -.005em;
	text-wrap: balance;
	overflow-wrap: anywhere;
	text-shadow: 0 2px 18px rgba(8, 4, 24, .55);
}
/* the wiki's tagline: two lines at most */
.fyw-pagehead .fy-pagehead__lede { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* the breadcrumb and the tagline keep the h1's dark glow over the scene (freya.css gives it to .fy-pagehead h1): a long
   page's breadcrumb wraps onto the brighter right side of the picture on phones */
.fyw-pagehead .fy-crumbs, .fyw-pagehead .fy-pagehead__lede { text-shadow: 0 1px 3px rgba(8, 4, 24, .9), 0 0 16px rgba(8, 4, 24, .75); }
/* the text column may shrink below its longest unbreakable line (the current page's crumb is one line with an ellipsis):
   it always fits the screen */
.fyw-pagehead .fy-pagehead__text { min-width: 0; }
/* the breadcrumb: DokuWiki's page links in the main site's crumbs; long names stay inside the screen. A step brighter than
   the main site's (--text-3): the wiki's breadcrumb can be long and wrap onto the brighter right side of the scene on
   phones, where --text-3 measures 3.4:1; the links in --text-2 keep 4.5:1 and more, the current page (one line with an
   ellipsis) is in the full text colour */
.fyw-crumbs .fy-crumbs li { min-width: 0; max-width: 100%; }
.fyw-crumbs .fy-crumbs a { color: var(--text-2); text-decoration: none; overflow-wrap: anywhere; }
/* a wiki breadcrumb wraps on phones: the main site's taller tap area (.55rem above and below, freya.css S15) would reach
   into the next line's links; .3rem keeps every target above 24 px and the row gap keeps the lines' targets apart */
.fyw-crumbs .fy-crumbs { row-gap: .6rem; }
.fyw-crumbs .fy-crumbs a { padding-block: .3rem; margin-block: -.3rem; }
.fyw-crumbs .fy-crumbs a:hover { color: var(--gold-300); }
.fyw-crumbs .fy-crumbs a.wikilink2 { text-decoration: underline dotted; text-underline-offset: .25em; }
.fyw-crumbs [aria-current="page"] { display: inline-block; max-width: min(46ch, 100%); overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.fyw-crumbs .curid { display: contents; }

/* 3. Wiki bar ---------------------------------------------------------------------------------------------------------- */
.fyw-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-5);
}
.fyw-bar > .fy-subnav { margin: 0; }
/* the rows that scroll sideways on small screens hold their absolutely placed parts (the tabs' screen reader words), so
   those scroll and clip with the row instead of making the page wider */
.fyw-bar__tabs, .fyw-tools__list, .fyw-editbar__links { position: relative; }
.fyw-bar__tabs a .fy-i { width: 1.05em; height: 1.05em; }
.fyw-bar__tabs a:not([aria-current="page"]) .fy-i { color: var(--violet-300); }
/* the wiki's own log in (not the main site's of the header): set apart from the wiki's places by a thin rule */
.fyw-bar__tabs .fyw-tab--login { position: relative; margin-left: .5rem; }
.fyw-bar__tabs .fyw-tab--login::before { content: ""; position: absolute; left: -.43rem; top: 10px; bottom: 10px; width: 1px; background: var(--line-2); }
.fyw-lock { width: .85em; height: .85em; margin-left: -.1rem; opacity: .75; }
/* the search: the main site's search field (the violet magnifier inside, a pill) and a violet button, as the market's */
.fyw-search {
	position: relative;
	display: flex;
	gap: var(--sp-2);
	flex: 1 1 320px;
	min-width: min(100%, 250px);
	margin: 0 0 0 auto;
}
.fyw-search__field { flex: 1 1 auto; min-width: 0; }
.fyw-search__field > input { width: 100%; min-height: 48px; border-radius: var(--r-pill); }
.fyw-search__field > input::-webkit-search-cancel-button { display: none; }
.fyw-search__field > .fy-i { color: var(--violet-300); }
.fyw-search > .fy-btn { --btn-h: 48px; flex: none; }
@media (max-width: 719.98px) {
	.fyw-search { flex-basis: 100%; }
}
@media (max-width: 379.98px) {
	.fyw-bar__tabs a { padding: 0 .8rem; }
	.fyw-search > .fy-btn { padding: 0 1rem; }
}
/* DokuWiki's live page suggestions under the field (#qsearch__out, filled and shown by its qsearch script): the main
   site's menu card (surface, line, radius 20, deep shadow) with its rows */
.fyw-qsearch {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 45;
	display: none;
	max-height: min(60vh, 440px);
	overflow-y: auto;
	padding: .45rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--shadow-lg), var(--inner-hi);
	color: var(--text);
	text-align: left;
	scrollbar-width: thin;
}
.fyw-qsearch > strong { display: block; padding: .5rem .7rem .3rem; color: var(--text-4); font: 800 .68rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.fyw-qsearch ul { margin: 0; padding: 0; list-style: none; }
.fyw-qsearch li, .fyw-qsearch li + li { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyw-qsearch a {
	display: block;
	min-height: 40px;
	padding: .6rem .7rem;
	border-radius: var(--r-md);
	color: var(--text);
	font: 600 .95rem/1.25 var(--font-display);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color var(--t-fast) var(--ease);
}
.fyw-qsearch a:hover, .fyw-qsearch a:focus-visible { background: var(--surface-3); color: var(--text); }
.fyw-qsearch a:focus-visible { outline-offset: -2px; }

/* 4. Row: the trace and the page tools --------------------------------------------------------------------------------- */
.fyw-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-5);
	margin: 0 0 var(--sp-6);
}
/* DokuWiki's trace: the main site's small caps label, the pages in the crumbs' type, a gold four-point sparkle (the
   eyebrow's) between them */
.fyw-trace { display: flex; align-items: center; gap: .65rem; flex: 1 1 320px; min-width: 0; }
.fyw-trace__label { flex: none; color: var(--text-4); font: 800 .66rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
/* five pages can wrap onto a second line: the row gap keeps the lines' tap areas (.3rem above and below each link, every
   target above 24 px) from reaching into each other */
.fyw-trace__list { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: .82rem; font-weight: 700; line-height: 1.3; }
.fyw-trace__list li, .fyw-trace__list li + li { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; max-width: 100%; margin: 0; }
.fyw-trace__list li + li::before {
	content: "";
	flex: none;
	width: .55em;
	height: .55em;
	background: var(--gold-300);
	clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
	opacity: .7;
}
.fyw-trace__list a {
	display: inline-block;
	max-width: 24ch;
	padding-block: .3rem;
	margin-block: -.3rem;
	overflow: hidden;
	color: var(--text-3);
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fyw-trace__list a:hover { color: var(--gold-300); }
.fyw-trace__list a[aria-current] { color: var(--text-2); }
/* the page tools: the kit's chips (panel.css .fy-chip: the main site's pill vocabulary of its news, pages and staff chips) */
.fy-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-height: 36px;
	padding: 0 .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--text-2);
	font: 600 .88rem/1 var(--font-display);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-chip:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .12); color: var(--text); }
.fy-chip[aria-pressed="true"], .fy-chip[aria-current="page"] { border-color: var(--violet-400); background: rgba(140, 87, 248, .2); color: #fff; }
.fy-chip .fy-i { width: 1em; height: 1em; }
@media (pointer: coarse) { .fy-chip { min-height: 40px; } }
.fyw-tools { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.fyw-tools__list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fyw-tools__list li, .fyw-tools__list li + li { margin: 0; }
.fyw-tool { max-width: 100%; }
.fyw-tool .fyw-label { min-width: 0; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fyw-tool .fy-i, .fyw-totop .fy-i { color: var(--violet-300); }
.fyw-tool:hover .fy-i, .fyw-totop:hover .fy-i, .fyw-tool[aria-current="page"] .fy-i { color: var(--text); }
@media (max-width: 767.98px) {
	.fyw-row { gap: var(--sp-2); }
	/* phones: the content comes first; the trace (a convenience of big screens) is left out, as the old wiki did */
	.fyw-trace { display: none; }
	.fyw-tools { flex: 1 1 100%; margin-left: 0; }
	/* a sideways scrolling row: room inside it for the focus ring (a scroll box clips what leaves it) */
	.fyw-tools__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: -6px; padding: 6px; }
	.fyw-tools__list::-webkit-scrollbar { display: none; }
	.fyw-tools__list li { flex: none; }
}
/* a plugin's own menu item icon (DokuWiki's filled SVG) next to the sprite's line icons */
.fyw-dwicon { display: inline-flex; flex: none; width: 1em; height: 1em; }
.fyw-dwicon svg { width: 100%; height: 100%; fill: currentColor; }

/* 5. Content grid: the content column and, when the page has one, the table of contents (a sticky right column from
      1100 px; above the content below that, where wiki-dev's script.js closes it). The TOC's own look is the bundle's. */
.fyw-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6) var(--sp-8); align-items: start; }
.fyw-doc > * { min-width: 0; }
#dokuwiki__content { position: relative; min-width: 0; }
@media (min-width: 1100px) {
	.fyw-doc--toc { grid-template-columns: minmax(0, 1fr) clamp(220px, 20vw, 280px); }
	.fyw-doc--toc > #dokuwiki__content { grid-column: 1; grid-row: 1; }
	.fyw-doc--toc > .fyw-doc__toc { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* 6. Page foot: DokuWiki's page info (its text look is the bundle's .docInfo) and Back to top (a chip) ------------------- */
.fyw-pageinfo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-5); }
.fyw-pageinfo > .docInfo { flex: 1 1 320px; min-width: 0; margin: 0; }
.fyw-totop { flex: none; margin-left: auto; }

/* 7. Editor row: the wiki's own session in a band under the header, the main site's dashed staff row inside -------------- */
.fyw-editbar { border-bottom: 1px solid var(--line); background: rgba(10, 7, 25, .72); }
.fyw-editbar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); padding-block: .55rem; }
.fyw-editbar__links { margin: 0; }
.fyw-editbar__links .fy-subnav__label { color: var(--gold-300); }
.fyw-editbar__link .fy-i { width: 1em; height: 1em; color: var(--violet-300); }
.fyw-editbar__link[aria-current="page"] .fy-i { color: #fff; }
.fyw-editbar__end { display: flex; align-items: center; gap: var(--sp-3); flex: none; min-width: 0; margin-left: auto; }
.fyw-editbar__who { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; margin: 0; color: var(--text-2); font: 600 .92rem/1.2 var(--font-display); white-space: nowrap; }
.fyw-editbar__who .fy-avatar { width: 28px; height: 28px; font-size: .8rem; }
.fyw-editbar__name { min-width: 0; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
.fyw-editbar__name a { color: inherit; text-decoration: none; }
.fyw-editbar__logout { margin: 0; }
@media (max-width: 1099.98px) { .fyw-editbar__name { max-width: 18ch; } }
/* phones: one row (the links scroll sideways in their pill track, Log out stays at the end); the name is read out but
   not shown */
@media (max-width: 719.98px) {
	.fyw-editbar__inner { flex-wrap: nowrap; gap: var(--sp-2); }
	.fyw-editbar__links { flex: 1 1 auto; min-width: 0; }
	.fyw-editbar__who { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
	.fyw-editbar__end { gap: var(--sp-2); }
}
/* small phones: the links get the room (the row is still named "Wiki editor" / "Wiki account" for screen readers) */
@media (max-width: 479.98px) { .fyw-editbar__links .fy-subnav__label { display: none; } }

/* 8. Dialog: the kit's dialog parts (panel.css, section 5) for the New page dialog ---------------------------------------- */
.fy-dialog--panel { width: min(560px, calc(100vw - 2rem)); max-height: min(88vh, 900px); }
.fy-dialog__frame { display: flex; flex-direction: column; max-height: inherit; margin: 0; }
.fy-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) var(--sp-4); border-bottom: 1px solid var(--line); }
.fy-dialog__title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.35rem; }
.fy-dialog__title .fy-i { color: var(--gold-300); }
.fy-dialog__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--text-3);
}
.fy-dialog__close:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.fy-dialog__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-5) var(--sp-6); }
.fy-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-6) var(--sp-5); border-top: 1px solid var(--line); }
@media (max-width: 559.98px) {
	.fy-dialog__head, .fy-dialog__content, .fy-dialog__foot { padding-inline: var(--sp-4); }
	.fy-dialog__foot .fy-btn { flex: 1 1 auto; }
}

/* 9. Footer: the wiki's five links on the first row of the main site's legal block, then the wiki's copyright ----------- */
.fyw-footer__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem var(--sp-5); margin: 0; padding: 0; list-style: none; }
.fy-footer .fyw-footer__links li, .fy-footer .fyw-footer__links li + li { margin: 0; }
.fyw-footer__links a { display: inline-block; padding-block: .45rem; margin-block: -.45rem; }

/* 10. Print: the page alone (freya.css hides the header, drawer, dock and footer) ---------------------------------------- */
@media print {
	.fyw-pagehead, .fyw-bar, .fyw-row, .fyw-editbar, .fyw-totop, .fyw-doc__toc, .fy-skip { display: none !important; }
	.fyw-doc { display: block; }
	body::before { display: none !important; }
}