/*
 * Basic Improved
 * Inherits from "Basic Formatting"
 * 
 * Revision 4 
 * 2025-05-11
 * 
 * */

/* 
 * Styles of the AO3 work UI
 * */

.preface { }
h2.title.heading { }
h3.byline.heading { }

/* 
 * Before Notes and After Notes 
 * */
div.notes.module > blockquote:only-child { 
	border: 2px dotted #ccc;
}

/* 
 * Element resets
 * */

#workskin {
	font-size: 100%;
	line-height: 1.2em;
	--var-test: 1;
}

sub, sup {
	line-height: 0;
	position: relative;
}

blockquote {
	margin: 0 2em;
	border-left: 0.5ch solid gray;
}

table {
	table-layout: fixed;
	margin: 0 auto;
	min-width: 40%;
	border-collapse: collapse;
	border: 2px solid gray;
}

table > tbody > tr > th {
	border-collapse: separate;
	text-align: center;
}

hr {
	box-sizing: content-box;
	color: gray;
}

abbr[title] {
	text-decoration: underline dotted;
}

details {
	display: block;
}

[hidden] {
	display: none;
}

/*
 * visual marking for heading sections
 * */

h1, h2, h3, h4 {
	position: relative;
}

h1:hover::before, 
h2:hover::before, 
h3:hover::before, 
h4:hover::before 
{
	position: absolute;
	content: 'ΒΆ';
	left: -1ch;
}


/* 
 * General Styles 
 * */

.with-color-scheme {
	color-scheme: light dark;
	/* when using this class, define 'color' and 'background-color' in the <style> */
}

.with-light-scheme {
	color-scheme: light;
}

.with-dark-scheme {
	color-scheme: dark;
}

span.htab {
	display: inline-block;
	width: 4ch;
}

span.htab8 {
	display: inline-block;
	width: 8ch;
}

span.htab-percent {
	display: inline-block;
	width: 12.5%;
}

span.vtab {
	display: inline-block;
	height: 4ch;
}

/* hide empty paragraphs, usually from double-generation */

/* CSS 4 */
p:blank, p:-moz-only-whitespace {
	display: none;
}

p.blank {
	display: none;
}

p.print {
}

div.print p + p {
	margin-top: 3ex;
	margin-top: 2lh; /* not in FF ESR yet */
}

.indent {
	text-indent: 3em;
}

.indent-percent {
	text-indent: 12%;
}

/* adds a book-like margin */
.book {
	margin: 0 auto;
	text-indent: 3em;
}

/* 
 * Modified to prefer libre/free distributable fonts.
 * 
 * Due to AO3 limitations, these fonts must be installed user-side.
 * 
 * Gentium from: https://software.sil.org/gentium/ / Debian package fonts-sil-gentium
 * Libra from: https://fontlibrary.org/en/font/libra-serif-modern
 * Liberation from: https://github.com/liberationfonts/liberation-fonts/releases / Debian package fonts-liberation
 * DejaVu from: https://dejavu-fonts.github.io/
 * Caladea from: https://fontlibrary.org/en/font/caladea
 * */
#workskin .font-serif {
	font-family: 'Gentium Plus', 'Gentium Basic', 'Libra Serif', 'Libra Serif Modern', 'Liberation Serif', 'Nimbus Roman', 'FreeSerif', 'Charis', 'DejaVu Serif', 'Caladea', 'Cambria', 'Tinos', 'Constantia', 'Palatino', 'Times New Roman', 'Georgia' , serif;
}

/* 
 * Modified to prefer libre/free distributable fonts.
 * 
 * Due to AO3 limitations, these fonts must be installed user-side.
 * 
 * Extra fonts in stack:
 * Isabella from: https://fontlibrary.org/en/font/isabella-sans
 * Metropolitano from:  https://fontlibrary.org/en/font/metropolitano
 * Gidole from: https://fontlibrary.org/en/font/gidole-regular
 * GNU Unifont, Lucida Grande: used by AO3 itself
 * Carlito from: https://fontlibrary.org/en/font/carlito / ChromeOS
 * */
#workskin .font-sansserif {
	font-family: 'Isabella Sans', 'Metropolitano', 'Open Sans', 'Liberation Sans', 'Nimbus Sans', 'Libra Sans',  'Andika', 'DejaVu Sans', 'Gidole', 
	'Lucida Grande', 'Lucida Sans Unicode', 'GNU Unifont', 'Carlito',
	'Arimo', 'Calibri', 'Verdana', 'Helvetica', 'Arial'  
	, sans-serif;
}

/*
 * Modified to prefer libre/free distributable fonts.
 * 
 * Due to AO3 limitations, these fonts must be installed user-side.
 * 
 * Iosevka from: https://typeof.net/Iosevka/ / Debian package fonts-iosevka
 * Monoid from: https://github.com/larsenwork/monoid
 * Source Code Pro from: https://github.com/adobe-fonts/source-code-pro
 * Inconsolata from: Debian package fonts-inconsolata
 * */
#workskin .font-monospace {
	font-family: 'Iosevka', 'Monoid', 'Liberation Mono', 'Source Code Pro', 'Inconsolata', 'Consolas', 'Courier Prime', 'Courier New', 'Courier'
	, monospace;
}

/*
 * Modified to prefer libre/free distributable fonts.
 * 
 * Due to AO3 limitations, these fonts must be installed user-side.
 * 
 * Allura from: https://www.1001fonts.com/allura-font.html
 * Feltpen from: https://fontlibrary.org/en/font/feltpen
 * Sofia from: http://www.latinotype.com/
 * 
 * */
#workskin .font-cursive {
	font-family: 'Allura', 'Feltpen Regular', 'Leopold Medium', 'Sofia Regular', 'Cursive'  
	, cursive;
}

/*
 * Modified to prefer libre/free distributable fonts.
 * 
 * Due to AO3 limitations, these fonts must be installed user-side.
 * 
 * */
#workskin .font-fantasy {
	font-family: fantasy;
}

/*
 * Modified to prefer libre/free distributable fonts.
 * 
 * Due to AO3 limitations, these fonts must be installed user-side.
 * 
 * */
#workskin .font-system-ui {
	font-family: system-ui;
}

/* Metric compatibility; Prefers libre fonts */
.metric-arial {
	font-family: 'Liberation Sans', 'Albany', 'Arimo', 'Arial', sans-serif;
}

.metric-courier {
	font-family: 'Nimbus Mono', 'Liberation Mono', 'Cumberland', 'TeX Gyre Cursor', 'Cousine', 'Courier New', monospace;
}

.metric-helvetica {
	font-family: 'Nimbus Sans', 'FreeSans', 'Helvetica', sans-serif;
}

.metric-times {
	font-family: 'TeX Gyre Termes', 'Nimbus Roman', 'Tinos', 'Times', serif;
}

.metric-cambria {
	font-family: 'Caladea', 'Cambria', sans-serif;
}

.metric-calibri {
	font-family: 'Carlito', 'Calibri', serif;
}

/*
 * Typographical Styles
 * Apply to eg.: <p class="name">, <span class="name">, etc.
 * 
 * The section order is: size, color, weight, form variant, stretch, etc.
 * */

.with-font-size[data-fsz] {
	font-size: attr(data-fsz);
}

/* relative sizes */
.font-big {
	font-size: 125%;
}
.font-x-big {
	font-size: 150%;
}
.font-little {
	font-size: 85%;
}
.font-x-little {
	font-size: 70%;
}

/* absolute sizes */

.font-large {
	font-size: large;
}
.font-x-large {
	font-size: x-large;
}
.font-small {
	font-size: small;
}
.font-x-small {
	font-size: x-small;
}
/* relative keywords */
.font-larger {
	font-size: larger;
}
.font-smaller {
	font-size: smaller;
}

/* 
 * font colors 
 * The listing from AO3 is supplemented with some SVG/X11 colornames.
 * Priority is given to colors that distinguish themselves well on standard white-background pages.
 * 
 * Official listing from:
 * * https://en.wikipedia.org/wiki/X11_color_names
 * */



.with-color[data-color] {
	color: attr(data-color);
}

.with-color[data-bg-color] {
	background-color: attr(data-bg-color);
}


.color-red {
	color: red;
}

.color-orange {
	color: orange;
}

.color-yellow {
	color: yellow;
}

.color-green {
	color: green;
}

.color-blue {
	color: blue;
}

.color-purple {
	color: purple;
}
.color-pink {
	color: pink;
}

.color-teal {
	color: #008282;
}

/* intentionally different */
.color-white {
	color: #eee;
}
/* intentionally different */
.color-black {
	color: #111;
}


.fontweight-normal {
	font-weight: normal;
}
.fontweight-lighter {
	font-weight: lighter;
}
.fontweight-bolder {
	font-weight: bolder;
}

.with-fontstretch[data-fstr] {
	font-stretch: attr(data-fstr);
}

.fontstretch-normal {
	font-stretch: normal;
}
.fontstretch-condensed {
	font-stretch: condensed;
}
.fontstretch-expanded {
	font-stretch: expanded;
}

/* 
 * Decorates nested <kbd> as keyboard combos, and <kbd>s denoting inputs inside <samp> output samples. Recommended by MDN. 
 * */
kbd:not(kbd *):not(pre *) > kbd, 
.txt-kbd > kbd {
	background-color: #eef;
	padding: 2px;
	border: 1px solid #444;
	border-radius: 4px;	
}

samp:not(samp *):not(pre *),
.txt-samp {
	background-color: rgba(94, 90, 128, 0.36);
}

samp > kbd {
	color: #040f04;
	text-decoration: underline;
}

ins:not(ins *), .txt-ins {
	background-color: rgba(22, 188, 22, 0.32);
	margin: auto 0.22ex;
}

del:not(del *), .txt-del {
	background-color: rgba(196, 20, 20, 0.32);
	margin: auto 0.22ex;
}

/* 
 * Two forms of caps
 * */
.caps, .small-caps {
	font-variant-caps: small-caps;
}

.all-small-caps {
	font-variant-caps: all-small-caps;
}

.text-shade {
	text-shadow: 1px 1px 1px gray;
}

/* Prefers libre fonts */
.dropcap {
	font-family: 'Liberation Serif', 'DejaVu Serif', 'Bitstream Serif', Georgia, serif;
	font-size: 3em;
}

/*
 * Narrative layout / decoration sections 
 * */

/* Prefers libre fonts */
.flashback {
	font-family: 'Lato', 'Nimbus', 'Palatino', serif;
	border-left: 8pt wavy gray;
	padding-left: 2ch;
	opacity: 80%;
}

.epistolary {
	font-family: 'Book Antiqua', serif;
	margin-left: 2ex;
}

.spoiler {
	background: #333;
	color: #333;
}

/* More "TLA"-like version of spoiler */
.REDACTED {
	display: inline-block;
	padding: auto 0.5ch;
	background-color: #333;
	color: #333;
	font-family: monospace;
}
	
.invisible {
	visibility: hidden;
}


/* title and byline shadows */

h3.title.shadow1, h4.title.shadow1 {
  text-shadow: 2pt -3pt gray;
}

h3.title.shadow2, h4.title.shadow2 {
  text-shadow: -2pt -2pt #bee;
}

h3.title.newspaper, h4.title.newspaper {
	/* pending */
}

.centered {
	margin: 0 auto;
	min-width: 20vw;
}

/* sometimes this is needed explicitly */
.align-left {
  text-align: left;
}

/* inherited */
.align-right {
  text-align: right;
}

/* inherited */
.align-center {
  text-align: center;
}

/* inherited */
.align-justify {
  text-align: justify;
}

.align-top {
	vertical-align: top;
}

.align-middle {
	vertical-align: middle; 
}

.align-bottom {
	vertical-align: bottom; 
}

.initial {
}