@charset "utf-8";
/*
 * snorql-modern.css
 * Modern styles for Snorql SPARQL Explorer — pure CSS, no framework dependency
 *
 * SECTIONS:
 *   0. Page Layout (body, header, sections, footer)
 *   1. CSS Custom Properties
 *   2–24. JS-generated dynamic elements and state changes
 */


/* ==========================================================================
   0. Page Layout — static HTML elements
   ========================================================================== */

body.snorql {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #1e293b;
	background: #f1f5f9;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* teal accent bar */
.accent-bar {
	height: 3px;
	background: linear-gradient(to right, #14b8a6, #2dd4bf, #10b981);
}

/* dark header */
.snorql header {
	background: #0f172a;
	color: white;
	padding: 0.625rem 1.5rem;
	margin: 0;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2);
}

#title {
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.03em;
	margin: 0;
	line-height: 1.5;
}

#title .brand {
	color: #2dd4bf;
	font-weight: 700;
}

#title .brand-sub {
	color: #94a3b8;
	font-weight: 400;
	font-size: 0.875em;
}

/* card-style sections */
.snorql section {
	margin: 0.75rem 0.75rem 0;
	padding: 1.25rem;
	background: white;
	border-radius: var(--radius-lg);
	border: 1px solid rgb(226 232 240 / 0.7);
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

#qsection {
	margin-top: 0.75rem;
	margin-bottom: 0.75rem;
	padding: 0;
	overflow: visible;
}

/* query section header */
.qheader {
	background: #f8fafc;
	padding: 0.5rem 1.25rem;
	border-bottom: 1px solid #e2e8f0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#qsection h2 {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
}

.qbody {
	padding: 1rem 1.25rem 1.25rem;
}

/* query controls bar */
.qcontrols {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0 0;
}

.qcontrols label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: #64748b;
}

#selectoutput {
	border-radius: var(--radius-sm);
	border: 1px solid #cbd5e1;
	padding: 0.375rem 0.625rem;
	font-size: 0.8125rem;
	background: white;
	color: #334155;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	transition: border-color 0.15s, box-shadow 0.15s;
}

#selectoutput:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgb(20 184 166 / 0.25);
	border-color: #14b8a6;
}

/* Go! button */
#qsection input[type=button] {
	background: linear-gradient(to bottom, #14b8a6, #0d9488);
	color: white;
	font-weight: 600;
	font-size: 0.8125rem;
	padding: 0.375rem 1.75rem;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.1);
	transition: all 0.15s ease;
	letter-spacing: 0.02em;
}

#qsection input[type=button]:hover {
	background: linear-gradient(to bottom, #2dd4bf, #14b8a6);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.15);
	transform: translateY(-0.5px);
}

#qsection input[type=button]:active {
	background: linear-gradient(to bottom, #0d9488, #0f766e);
	transform: translateY(0);
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.15);
}

/* dark footer */
.snorql footer {
	margin-top: auto;
	background: #0f172a;
	color: #64748b;
	padding: 0.75rem 1.5rem;
	text-align: center;
	font-size: 0.8125rem;
	border-top: 1px solid rgb(30 41 59 / 0.5);
}

.snorql footer a {
	color: #2dd4bf;
	text-decoration: none;
	transition: color 0.15s;
}

.snorql footer a:hover {
	color: #5eead4;
	text-decoration: underline;
}

.snorql footer a:visited {
	color: #2dd4bf;
}

/* responsive section margins */
@media (min-width: 640px) {
	.snorql section {
		margin-left: 1.25rem;
		margin-right: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.snorql section {
		margin-left: 2rem;
		margin-right: 2rem;
	}
}


/* ==========================================================================
   1. CSS Custom Properties
   Modern slate palette with teal accents
   ========================================================================== */

:root {
	/* base color components - neutral slate */
	--cb-hue: 215deg;
	--cb-sat: 16%;
	--cb-lgh: 91%;

	--cb-mul-dk: 0.82;
	--cb-mul-md: 0.87;
	--cb-mul-lg: 1.09;

	/* link decoration */
	--cl-deco-sat: 60%;
	--cl-deco-lgh: 60%;
	--cl-deco-alph: 0.25;

	/* size related */
	--pimg-w: 200px;
	--s-mg-l: 1.5rem;
	--wd-term-ratio: 22%;
	--wd-term: calc((100vw - var(--s-mg-l)) * var(--wd-term-ratio));
	--wd-term-min: 130px;
	--wd-term-pad: 0.5em;

	/* design tokens */
	--radius-xl: 0.75rem;
	--radius-lg: 0.625rem;
	--radius-md: 0.5rem;
	--radius-sm: 0.375rem;
	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.06);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
}

body {
	/* computed background colors for JS-generated elements */
	--bg-basic: hsl(var(--cb-hue) var(--cb-sat) var(--cb-lgh));
	--bgd-l: calc(var(--cb-lgh) * var(--cb-mul-dk));
	--bgt-l: 97%;
	--bgth-l: 92%;

	--bg-dark: hsl(from var(--bg-basic) h s var(--bgd-l));
	--bg-table: hsl(from var(--bg-basic) h s var(--bgt-l));
	--bg-th: hsl(from var(--bg-basic) h s var(--bgth-l));
	--bg-header: hsl(from var(--bg-th) h s l / 0.85);
	--bg-hdeven: hsl(from var(--bg-th) h s l / 0.75);

	/* table cell lightness variants */
	--bg-l0: var(--bg-table);
	--bg-l1: hsl(from var(--bg-table) h s l / 0.85);
	--bg-l2: hsl(from var(--bg-table) h s l / 0.50);
	--bg-l3: hsl(from var(--bg-table) h s l / 0.35);
	--bg-l4: hsl(from var(--bg-table) h s l / 0.20);

	--bg-body: hsl(from var(--bg-basic) h s 97% / 0.10);
	--bg-term: hsl(from var(--bg-basic) h s 92% / 0.25);
	--bg-type: hsl(from var(--bg-basic) h s 97% / 0.90);
	--bg-agential: hsl(48deg 80% 96% / 0.60);
	--bg-spatial: hsl(36deg 60% 95% / 0.70);
	--bg-temporal: hsl(24deg 70% 96% / 0.55);

	/* link text colors - teal accent */
	--tx-link: hsl(174deg 84% 32%);
	--tx-llink: hsl(from var(--tx-link) h s l / 0.5);
	--tx-dlink: hsl(from var(--tx-link) h s calc(l * 0.75));
	--tx-dhead: hsl(215deg 28% 28%);
	--tx-blink: hsl(from var(--tx-link) h s calc(l * 1.3));
	--tx-link-decor: hsl(from var(--tx-link) h var(--cl-deco-sat) var(--cl-deco-lgh) / var(--cl-deco-alph));
	--tx-visited: hsl(270deg 45% 42%);
	--tx-visited-decor: hsl(from var(--tx-visited) h var(--cl-deco-sat) var(--cl-deco-lgh) / var(--cl-deco-alph));

	--wd-term: 22%;
}

/* JS state control */
body[data-type=prepare] {
	--cv-r: 223;
	--cv-g: 223;
	--cv-b: 223;
}


/* ==========================================================================
   2. Base Resets
   ========================================================================== */

.uri, .literal {
	word-break: break-all;
}

code, textarea, pre,
section div.CodeMirror {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.875rem;
	line-height: 1.4;
}

a,
.switcher,
.pseudolink {
	cursor: pointer;
	color: var(--tx-link);
	transition: color 0.12s ease;
}

a:visited {
	color: var(--tx-visited);
}

a:hover {
	color: hsl(from var(--tx-link) h s calc(l * 1.15));
}

a:not([href]):hover {
	text-decoration: none;
	cursor: default;
	color: var(--tx-link);
}


/* ==========================================================================
   3. Layout Helpers (used by JS)
   ========================================================================== */

.main {
	flex: 1;
}

#easyspql {
	margin: 0;
	padding: 0;
	background: transparent;
}


/* ==========================================================================
   4. Section State Changes (JS-driven)
   Only styles triggered by JS class additions
   ========================================================================== */

/* intro state: JS adds "intro" to header and #ressection */

#ressection {
	position: relative;
	overflow-x: auto;
}

#ressection.intro {
	background: #f8fafc;
	border-color: #e2e8f0;
}

#ressection.intro p {
	max-width: 1000px;
	color: #475569;
	line-height: 1.6;
}

#result .empty {
	color: #64748b;
	padding: 0.75em 0;
	font-size: 0.875rem;
}


/* ==========================================================================
   5. Prefix Text & Query Input
   ========================================================================== */

#prefixestext {
	color: #94a3b8;
	margin: 0 0 0.625rem;
	height: 4em;
	overflow-y: auto;
	resize: vertical;
	padding: 0.35em 0.6em;
	line-height: 1.3;
	font-size: 0.6875rem;
	white-space: pre;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-sm);
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

#querytext {
	width: 100%;
	height: 280px;
	font-size: 100%;
	padding: 0.1em 0.3em;
}


/* ==========================================================================
   6. Query Section Switcher / Toggler
   ========================================================================== */

#qsection.toggle h2 {
	cursor: pointer;
}

#qsection .switcher {
	float: none;
	color: var(--bg-l0);
	padding-left: 2px;
}

#qsection.hide > div {
	display: none;
}

.switcher {
	display: inline-block;
	float: right;
}


/* ==========================================================================
   7. Query Examples Spread — CSS Grid layout
   ========================================================================== */

div.spread {
	display: grid;
	grid-template-columns: 1fr 260px;
	grid-template-rows: auto auto;
	gap: 0 0.75rem;
}

/* CodeMirror: left column, row 1 */
div.spread > .CodeMirror {
	grid-column: 1;
	grid-row: 1;
	min-height: 0;
}

/* Examples: right column, row 1 */
div.spread > select.example {
	grid-column: 2;
	grid-row: 1;
}

/* Controls: full width, row 2 */
div.spread > .qcontrols {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Example select styling */
select.example {
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-md);
	background: white;
	font-size: 0.8125rem;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

select.example option {
	padding: 0.35em 0.65em;
	cursor: pointer;
}

select.example option:nth-child(even) {
	background: rgb(248 250 252 / 0.5);
}

select.example option:hover {
	background: #f0fdfa;
	color: #0f766e;
}

select.example option:first-child {
	text-align: center;
	background: #f1f5f9;
	padding: 0.4em 0.65em;
	cursor: default;
	font-weight: 500;
	color: #64748b;
	letter-spacing: 0.03em;
}

select.example option:checked {
	background: #f0fdfa linear-gradient(0deg, #f0fdfa 0%, #f0fdfa 100%);
	color: black !important;
}

select.example:focus option:checked {
	background: #94a3b8;
}


/* ==========================================================================
   8. Query Results Table (.queryresults)
   ========================================================================== */

table.queryresults {
	background: white;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid rgb(226 232 240 / 0.7);
	box-shadow: var(--shadow-sm);
}

.queryresults {
	border-collapse: collapse;
	margin-top: 0.5em;
	margin-bottom: 1em;
	min-width: 1000px;
}

.queryresults td,
.queryresults th {
	padding: 0.5em 0.75em;
	vertical-align: top;
	word-break: break-all;
	transition: background-color 0.1s ease;
}

.queryresults th {
	position: relative;
	padding-right: 1em;
	font-weight: 600;
	text-align: left;
	font-size: 0.8125rem;
	color: #334155;
	letter-spacing: 0.01em;
	border-bottom: 1px solid #e2e8f0;
}

.queryresults td {
	min-width: 4em;
	border-bottom: 1px solid rgb(241 245 249 / 0.8);
	font-size: 0.875rem;
}

.queryresults.plus5 td {
	max-width: 1200px;
}

.queryresults.plus3 td {
	max-width: 1600px;
}

.queryresults.even th {
	width: 50%;
}

/* Zebra stripes */
.snorql .queryresults th {
	background: #f8fafc;
}

.snorql .queryresults th:nth-child(even) {
	background: #f4f6f9;
}

.snorql .queryresults tr:nth-child(odd) td {
	background: white;
}

.snorql .queryresults tr:nth-child(even) td {
	background: rgb(248 250 252 / 0.6);
}

.snorql .queryresults tr:nth-child(odd) td:nth-child(even) {
	background: rgb(250 251 253 / 0.8);
}

.snorql .queryresults tr:nth-child(even) td:nth-child(even) {
	background: rgb(244 246 248 / 0.6);
}

.queryresults tr:hover td {
	background: rgb(240 253 250 / 0.5) !important;
}

/* Result table links */
.queryresults a small {
	font-size: 100%;
	color: #94a3b8;
}

.queryresults small {
	font-size: 100%;
	color: #94a3b8;
}

.queryresults a[href^="?query="]:hover {
	color: var(--tx-blink);
	text-decoration-color: var(--tx-dlink);
}

.uri a,
a.uri,
a.qname {
	text-decoration: none;
}

.unbound {
	color: #94a3b8;
}


/* ==========================================================================
   9. Node Type Styles (.literal, .uri, .qname decorators)
   ========================================================================== */

td span.literal:before {
	content: '"';
	color: #d4d9e1;
	font-size: 0.85em;
}

td span.literal:after {
	content: '"';
	color: #d4d9e1;
	font-size: 0.85em;
}

td a.uri:before,
.uri a:before {
	content: "<";
	color: #d4d9e1;
	font-size: 0.85em;
}

td a.uri:after,
.uri a:after {
	content: ">";
	color: #d4d9e1;
	font-size: 0.85em;
}

td span.literal[data-lang]:after {
	content: '"@' attr(data-lang);
	color: #d4d9e1;
	font-size: 0.85em;
}

td span.literal[data-dtype]:after {
	content: '"^^' attr(data-dtype);
	color: #d4d9e1;
	font-size: 0.85em;
}

td span.literal[data-lang=ja-x-mt]:after {
	content: '"@' attr(data-lang) ' (機械翻訳)';
}

td span.literal[data-lang=en-x-mt]:after,
html[lang=en] td span.literal[data-lang=ja-x-mt]:after {
	content: '"@' attr(data-lang) ' (M/C trans.)';
}


/* ==========================================================================
   10. Link Anchors & Decorations
   ========================================================================== */

a.extlink {
	margin-left: 0.2em;
}

a.dlink.subtext {
	text-decoration-color: var(--tx-link-decor);
}

a.dlink.subtext::before {
	content: ", ";
	display: inline-block;
	padding: 0 0.3em 0 0.2em;
}

.uri a:hover,
*[itemprop='url'] a:hover,
a.uri:hover,
a.qname:hover,
td a[href].prop:hover,
.queryresults a[href^="?query="] {
	text-decoration: underline;
	text-decoration-color: var(--tx-link-decor);
	cursor: pointer;
}

.uri a:visited:hover,
*[itemprop='url'] a:visited:hover,
a.uri:visited:hover,
a.qname:visited:hover,
td a[href].prop:visited:hover,
.queryresults a[href^="?query="]:visited {
	text-decoration-color: var(--tx-visited-decor);
}

td a.prop {
	color: var(--tx-dlink);
	cursor: default;
}

td a.prop:hover {
	color: var(--tx-blink);
	text-decoration: none;
}

a.dlink {
	color: var(--tx-dlink);
}

a.dlink:hover {
	text-decoration-color: var(--tx-link-decor);
	background-color: rgb(240 253 250 / 0.5);
	border-radius: var(--radius-sm);
}

td a.uri.dlink:after {
	content: ">➹";
}

a span.exspn {
	color: #0f172a;
	background-color: rgb(240 253 250 / 0.6);
	cursor: zoom-in;
	border-radius: var(--radius-sm);
	padding: 0 3px;
	transition: background-color 0.12s;
}

a span.exspn:hover {
	background-color: rgb(240 253 250 / 0.9);
}

a span.exspn.expanded {
	cursor: zoom-out;
}

.link {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 9L9 1M9 1H3M9 1v6' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center right no-repeat;
	padding-right: 13px;
}


/* ==========================================================================
   11. Incremental Loading Controls
   ========================================================================== */

.pseudolink.skipper {
	color: #94a3b8;
	letter-spacing: -10px;
	display: inline-block;
	width: 1.2em;
	margin-left: -0.2em;
}

.ism .pseudolink.skipper {
	letter-spacing: -4px;
	margin-left: 0;
}

.ism .pseudolink.left::first-letter {
	margin-right: 2px;
}

.isa .pseudolink.skipper {
	letter-spacing: -1px;
	margin-left: 0.2em;
	margin-right: -0.3em;
}

.isa .pseudolink.left::first-letter {
	margin-right: 2px;
}

.skipper:hover {
	color: var(--tx-link);
}

.incCtrl .wait {
	color: #94a3b8;
	text-decoration: none;
	cursor: default;
}

.incCtrl a {
	display: none;
}

.incCtrl a.active {
	display: inline;
}

.incCtrl select {
	margin-left: 0.5em;
	border-radius: var(--radius-sm);
	border: 1px solid #e2e8f0;
	padding: 0.15em 0.3em;
	font-size: 0.8125rem;
	background: white;
	transition: border-color 0.15s;
}

.incCtrl select:focus {
	outline: none;
	border-color: #14b8a6;
}

.ctrl0 {
	margin: -0.2em 0 0.2em;
}

.ctrl1 {
	margin: 0.3em 0 -0.5em;
}

.queryresults tbody.wait {
	display: none;
}

.queryresults.showall tbody.wait {
	display: table-row-group;
}

.pager {
	font-size: 0.8125rem;
	color: #64748b;
}

.pager input {
	margin-left: 0.5em;
	width: 2.5em;
	background: white;
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-sm);
	font-size: 0.8125rem;
	height: 1.4em;
	text-align: right;
	padding-right: 0.3em;
	transition: border-color 0.15s;
}

.pager input:focus {
	outline: none;
	border-color: #14b8a6;
}


/* ==========================================================================
   12. Sorter Buttons
   ========================================================================== */

span.sbholder {
	display: inline-block;
	margin-left: 0.3em;
	position: absolute;
	right: 0.33em;
	top: 0.33em;
}

span.sortbtn {
	display: block;
	color: #cbd5e1;
	text-shadow: none;
	line-height: 1;
	cursor: pointer;
	font-size: 65%;
	transition: color 0.12s;
}

span.sortbtn:hover,
span.sortbtn.now {
	color: #334155;
}

span.sortbtn:hover {
	background: rgb(240 253 250 / 0.6);
	border-radius: var(--radius-sm);
}


/* ==========================================================================
   13. Subtext & Toggler
   ========================================================================== */

table.describe .subtext,
table.queryresults .subtext {
	font-size: 0.8125rem;
	color: #94a3b8;
	font-weight: normal;
	user-select: none !important;
}

table.queryresults .subtext {
	margin-left: 1em;
}

table.queryresults .subtext.pseudolink:hover {
	color: var(--tx-link);
}

table.nosubtext .subtext {
	display: none;
}

table.nosubtext th .subtext {
	display: inline;
}

table.queryresults .subtext:before {
	content: "(";
}

table.queryresults .subtext:after {
	content: ")";
}

td .toggler,
td .switcher {
	font-size: 0.75rem;
	color: #94a3b8;
	display: block;
	transition: color 0.12s;
}

td .toggler:hover {
	cursor: pointer;
	text-decoration: underline;
	color: var(--tx-link);
}

td .toggler:before {
	content: "(";
}

td .toggler:after {
	content: ")";
}

td[rowspan] {
	position: relative;
}

td .toggler {
	position: absolute;
	bottom: 5px;
	right: 10px;
}

td .switcher {
	margin-right: 0.5em;
}

.toggler {
	cursor: pointer;
}


/* ==========================================================================
   14. DESCRIBE Table
   ========================================================================== */

table.describe {
	width: 100%;
	border-collapse: collapse;
	background-color: white;
	border-radius: var(--radius-lg);
	margin-bottom: 1em;
	border: 1px solid rgb(226 232 240 / 0.7);
	overflow: hidden;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.06);
}

table.describe th,
table.describe td {
	border: 1px solid #e2e8f0;
	border-left: none;
	border-right: none;
	padding: 0.6em 0.85em;
	vertical-align: top;
	transition: background-color 0.12s ease;
}

table.describe td:first-child {
	border-right: 1px solid rgb(226 232 240 / 0.5);
}

table.describe tr:last-child td {
	border-bottom: none;
}

table.describe > tbody > tr:hover > td {
	background-color: rgb(240 253 250 / 0.4);
}

.describe td.repeated {
	display: none;
}

.describe span.literal {
	white-space: pre-wrap;
	display: block;
	max-height: 15em;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 transparent;
}

/* Column and property type coloring */
col.term {
	width: var(--wd-term);
	min-width: var(--wd-term-min);
	background: hsl(from var(--bg-basic) h s 94% / 0.35);
}

table.describe .type {
	background: var(--bg-type);
}

table.describe .agential {
	background: var(--bg-agential);
}

table.describe .spatial {
	background: var(--bg-spatial);
}

table.describe .temporal {
	background: var(--bg-temporal);
}

td[itemprop=abstract] a {
	margin-left: 0.8em;
}

table.describe .ipd .subtext {
	color: #059669;
}

td[itemprop="license"] img {
	max-height: 16px;
	max-width: 80px;
	vertical-align: middle;
	margin-left: 3px;
}

td[itemprop="license"] img[src^="https://licensebutton"] {
	filter: opacity(55%);
}

table.describe .more-chname td {
	border-top-style: double;
	border-top-width: 3px;
}

.more-chname td a {
	text-decoration-color: var(--tx-link-decor);
	text-decoration-line: underline;
}

td.rdflist {
	color: #94a3b8;
	width: 2em;
}

td span.scl {
	display: block;
	height: 15em;
	overflow-y: scroll;
	resize: vertical;
}

/* Readable property description label */
span[data-pdesc]:before {
	content: attr(data-pdesc);
	color: var(--tx-dlink);
	margin-right: 8px;
	min-width: 4em;
	text-align-last: justify;
	display: inline-block;
	font-size: 0.8125rem;
}

span[data-pdesc] a {
	color: #b0b8c4;
	font-size: 0.6875rem;
}

/* Nested describe tables */
table.describe table {
	border-collapse: collapse;
	border-style: solid;
}

table.describe table.describe {
	margin-bottom: 0;
}

table.describe caption {
	text-align: left;
}

td table.describe caption {
	font-size: 80%;
	color: #94a3b8;
}

td table.describe caption:before {
	content: "<";
}

td table.describe caption:after {
	content: ">";
}

td table.describe.viabnode caption:before {
	content: "(";
}

td table.describe.viabnode caption:after {
	content: ")";
}

.viabnode col.term {
	background: transparent;
}

table.viabnode td,
table.viabnode td a,
span.structbnode {
	color: #64748b;
}


/* ==========================================================================
   15. ATS / Type / Label rows
   ========================================================================== */

table.describe .ats td {
	background: transparent;
}

table.describe .ats > tr > td:nth-child(2) {
	background: #fefefe9c;
}

table.describe .type > tr > td:nth-child(2),
table.describe .label > tr > td:nth-child(2) {
	background: rgb(250 250 250 / 0.50);
}


/* ==========================================================================
   16. Gallery View
   ========================================================================== */

table.gallery thead {
	display: none;
}

table.gallery tbody,
.queryresults.showall.gallery tbody {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	padding: 0.375rem;
}

table.gallery.fixed tbody {
	background: #f8fafc;
}

table.gallery tr {
	display: flex;
	flex-direction: column-reverse;
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid rgb(226 232 240 / 0.7);
	box-shadow: var(--shadow-xs);
	transition: box-shadow 0.15s, transform 0.15s;
}

table.gallery tr:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

#result .queryresults.gallery td {
	background: #f8fafc;
}

table.gallery td {
	display: inline-block;
	width: 200px;
	padding: 0 6px;
	font-size: 80%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.gallery td.thumb {
	text-align: center;
	padding: 6px;
	flex-grow: 1;
	background: white !important;
}

table.gallery img.thumb {
	max-width: 200px;
	max-height: 200px;
	border-radius: var(--radius-sm);
}

table.gallery td span {
}

table.gallery a.uri {
	width: 100%;
	display: inline-block;
	overflow-x: scroll;
	scrollbar-width: thin;
	scrollbar-color: #cbd5e1 #f1f5f9;
	direction: rtl;
}

table.gallery a.uri::-webkit-scrollbar {
	height: 3px;
}

table.gallery a.uri::-webkit-scrollbar-track {
	background-color: #f1f5f9;
}

table.gallery a.uri::-webkit-scrollbar-thumb {
	background-color: #cbd5e1;
}

table.gallery a.extlink {
	display: none;
}


/* ==========================================================================
   17. Map (.map, .clmap) & z-index management
   ========================================================================== */

td {
	position: relative;
}

td.map {
	position: static;
}

td.map > div {
	height: 140px;
	width: 200px;
	position: absolute !important;
	right: 0;
	top: 0;
	z-index: 20;
}

.clmap {
	position: absolute;
	z-index: 10;
	min-width: 85%;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.clmap .leaflet-popup-content img {
	max-width: 300px;
}

table.map tbody {
	display: none;
}

/* z-index management for Leaflet (preserved) */
#ressection img.primimage {
	z-index: 10;
}

.map .leaflet-pane {
	z-index: 2;
}

.map .leaflet-top,
.map .leaflet-bottom {
	z-index: 5;
}


/* ==========================================================================
   18. Finder Overlay
   ========================================================================== */

a.finder {
	float: right;
	margin-right: 0.5em;
	font-size: 70%;
	text-decoration: none;
	color: rgb(15 23 42 / 0.2);
	transition: color 0.15s;
}

a.finder:hover {
	color: rgb(15 23 42 / 0.5);
	cursor: pointer;
}

td[itemprop=isbn] a.finder {
	float: none;
	margin-left: 0.3em;
}

div.finder {
	position: absolute;
	top: 34px;
	left: 4em;
	display: none;
	width: max-content;
	min-width: 600px;
	min-height: 50px;
	z-index: 30;
	font-size: 80%;
	border: 1px solid rgb(226 232 240 / 0.7);
	background: white;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.thumb div.finder {
	background: #fafbff;
}

div.finder.show {
	display: block;
}

div.finder.bookinfo {
	width: 40em;
	font-size: 0.8125rem;
	box-shadow: var(--shadow-lg);
	max-height: 20em;
	overflow-y: auto;
	scrollbar-width: thin;
}

div.finder.bookinfo > p {
	font-weight: 600;
	margin: 0 0 0.3em;
	padding: 0.5em 0.75em;
	background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	color: #334155;
	font-size: 0.8125rem;
}

div.finder div.fbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	max-width: 90vw;
	padding: 6px;
	gap: 6px;
}

div.finder.bookinfo div.fbox {
	padding: 0 0.7em 0.7em;
}

div.finder p {
	text-align: center;
	margin: 0.5em 0 0;
}

div.finder div.fbox span {
	min-width: 100px;
	min-height: 90px;
	box-shadow: var(--shadow-sm);
	border: 1px solid #e2e8f0;
	padding: 0.5em;
	border-radius: var(--radius-md);
	background: white;
}

div.fbox span img {
	max-width: 180px;
	border: transparent solid 1px;
	border-radius: var(--radius-sm);
}

.thumb div.fbox img {
	max-width: 130px;
	max-height: 130px;
}

div.fbox span img:hover {
	border-color: var(--tx-link);
}

div.fbox span a {
	color: var(--tx-link);
	text-decoration: none;
}

div.fbox span a:hover {
	text-decoration: underline;
}

div.finder .closer {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5;
	text-align: center;
	color: #94a3b8;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	transition: all 0.15s;
}

div.finder .closer:hover {
	cursor: pointer;
	color: #0f172a;
	background: #f1f5f9;
	border-color: #e2e8f0;
}


/* ==========================================================================
   19. Image & Waka (Poetry)
   ========================================================================== */

#ressection figure {
	margin: 0;
	padding: 0;
	z-index: 30;
	position: relative;
}

#ressection figure.primimage,
#ressection div.waka {
	position: absolute;
	top: 0;
	right: 0;
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

#ressection figure.primimage img {
	max-width: var(--pimg-w);
	max-height: 200px;
	background: rgb(255 255 255 / 0.6);
	display: block;
}

#ressection figure.primimage img:hover {
	cursor: zoom-in;
}

#ressection figure.primimage img.still:hover {
	cursor: default;
}

#ressection figure.primimage img:active,
#ressection figure.primimage.zoomed img {
	max-width: calc(100vw - 3em);
	max-height: calc(100vh - 4.5em);
	cursor: zoom-out;
}

#ressection figure.primimage img.still:active {
	max-width: var(--pimg-w);
	max-height: 200px;
	cursor: default;
}

/* primimage / waka bar */
.waka .wbar,
.primimage .wbar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	font-size: 10px;
	writing-mode: horizontal-tb;
	text-align: center;
	cursor: pointer;
}

.primimage .wbar {
	height: 16px;
	background: linear-gradient(rgb(241 239 215 / 0.2), rgb(254 253 253 / 0.2));
	color: #cbd5e1;
}

.primimage .wbar:hover,
.primimage.hide .wbar {
	background: linear-gradient(rgb(241 239 215 / 0.67), rgb(254 253 253 / 0.67));
	color: var(--tx-llink);
}

.primimage.hide {
	height: 12px;
	min-height: 12px;
	padding: 0 2em;
	overflow: hidden;
}

.primimage.zoomed .wbar {
	display: none;
}

/* Brightness control */
#ressection figure .ctrl {
	display: none;
	position: absolute;
	top: 0;
	left: -18px;
	opacity: 0.6;
	color: #e2e8f0;
	background: rgb(100 116 139 / 0.8);
	height: 22px;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius-sm);
}

figure .ctrl span {
	font-size: 18px;
	vertical-align: top;
	display: inline-block;
	margin: 3px 0 0 2px;
	width: 16px;
}

#ressection figure input[type=range] {
	width: 120px;
}

#ressection figure.zoomed .ctrl {
	display: block;
}

#ressection figure.zoomed .ctrl:hover,
#ressection figure.zoomed .ctrl:active,
#ressection figure.zoomed .ctrl.show {
	color: #fef08a;
	opacity: 1;
}

/* Exhibition item image */
td figure.subimage {
	float: right;
}

td figure.subimage img {
	max-height: 150px;
	max-width: 200px;
}

/* Thumbnail images */
td img.thumb {
	max-width: 150px;
	max-height: 80px;
	border-radius: var(--radius-sm);
}

.expandimg td img.thumb {
	max-width: 350px;
	max-height: 300px;
}

/* Waka (poetry) */
.waka {
	writing-mode: vertical-rl;
	min-width: 160px;
	min-height: 400px;
	padding: 2em 1em 2em 1.5em;
	font-family: serif;
	background: white url("../img/washi.jpg");
	font-size: 105%;
	z-index: 10;
}

.waka.hide {
	height: 12px;
	min-height: 12px;
	padding: 0 2em;
}

.waka.hide span {
	display: none;
}

.waka .wbar {
	height: 20px;
	background: linear-gradient(#f1efd7, #fefdfd);
	color: #fcfcfc;
}

.waka span {
	display: block;
	max-height: 600px;
}

.waka .kotoba {
	max-height: 440px;
	margin-top: 1em;
}

.waka .verse {
	font-size: 150%;
	line-height: 2;
	margin-right: 0.5em;
}

.waka .author {
	text-align: end;
	font-size: 114%;
	line-height: 1.2;
}

.waka .shimo {
	margin-top: 6em;
}

.waka .nav {
	position: absolute;
	bottom: 0;
	display: block;
	width: 2em;
	height: 1.5em;
	color: #fcfcfc;
	text-decoration: none;
}

.waka .nav.prev {
	right: 0;
}

.waka .nav.next {
	left: 0;
}

.waka.hide .nav {
	display: none;
}

.waka a.nav:hover {
	color: #94a3b8;
}


/* ==========================================================================
   20. Misc States
   ========================================================================== */

.busy {
	color: #94a3b8;
	font-size: 0.875rem;
}

@keyframes snorql-spin {
	to { transform: rotate(360deg); }
}

.busy:after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid #e2e8f0;
	border-top-color: #14b8a6;
	border-radius: 50%;
	animation: snorql-spin 0.6s linear infinite;
	vertical-align: -3px;
	margin-left: 0.5em;
}

img[src$="spinner.gif"] {
	width: 14px;
	opacity: 0.6;
}

.misc {
	color: #94a3b8;
	font-size: 0.8125rem;
}

.subtitle {
	text-align: center;
	margin-top: 0;
	color: #64748b;
	font-size: 0.875rem;
}

.directory li {
	margin-bottom: 0.5em;
}

.directory small {
	font-size: 0.8125rem;
	color: #64748b;
}

#rdficon {
	float: right;
	margin: 0.6em 1em;
}

span.marked {
	border-bottom: #cbd5e1 dotted 1px;
	display: inline-block;
	height: 1.4em;
	margin-left: 0.4em;
}

a.extlink,
a.extlink img {
	user-select: none !important;
}

span.literal em {
	font-style: normal;
	background: rgb(240 253 250 / 0.5);
}

.pseudoquery {
	display: inline-block;
	margin-top: 0.75em;
	padding: 0.35em 0.75em;
	font-size: 0.875rem;
	color: var(--tx-link);
	border: 1px solid rgb(20 184 166 / 0.2);
	border-radius: var(--radius-md);
	background: rgb(240 253 250 / 0.5);
	transition: all 0.15s ease;
}

.pseudoquery:hover {
	background: rgb(240 253 250 / 0.9);
	border-color: rgb(20 184 166 / 0.4);
	text-decoration: none;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
}

.qshilite {
	border: 3px fuchsia solid !important;
}

div.osp {
	margin-top: 1em;
}

div.ops table {
	width: 100%;
}

/* Graph draw trigger */
.strigger {
	float: right;
	color: rgb(148 163 184 / 0.15);
	cursor: pointer;
	margin-right: 0.5em;
	transition: color 0.15s;
}

.strigger:hover {
	color: rgb(148 163 184 / 0.5);
}


/* ==========================================================================
   21. EasySPARQL Form (#moreform)
   ========================================================================== */

#moreform {
	margin: 0.5em var(--s-mg-l);
	padding: 0.75em 1.25em;
	background: white;
	border: 1px solid rgb(226 232 240 / 0.7);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	font-size: 0.875rem;
}

#moreform input[type=text] {
	width: 8em;
	border: 1px solid #e2e8f0;
	border-radius: var(--radius-sm);
	padding: 0.35em 0.5em;
	font-size: 0.8125rem;
	transition: border-color 0.15s, box-shadow 0.15s;
}

#moreform input[type=text]:focus {
	outline: none;
	border-color: #14b8a6;
	box-shadow: 0 0 0 2px rgb(20 184 166 / 0.2);
}

#moreform input[type=submit] {
	height: 1.8em;
	margin-left: 0.5em;
	border-radius: var(--radius-sm);
	background: linear-gradient(to bottom, #14b8a6, #0d9488);
	color: white;
	border: none;
	padding: 0 0.75em;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 500;
	box-shadow: var(--shadow-xs);
	transition: all 0.15s ease;
}

#moreform input[type=submit]:hover {
	background: linear-gradient(to bottom, #2dd4bf, #14b8a6);
	transform: translateY(-0.5px);
}

#moreform input[type=submit]:active {
	background: linear-gradient(to bottom, #0d9488, #0f766e);
	transform: translateY(0);
}

#moreform.ja span[lang=en],
#moreform.en span[lang=ja] {
	display: none;
}

input[name=who] {
	background: hsl(48deg 80% 96% / 0.55);
}

input[name=where] {
	background: hsl(36deg 60% 95% / 0.55);
}

input[name=when] {
	background: hsl(24deg 70% 96% / 0.45);
}

input[name=title] {
	background: #f8fafc;
}

input[name=text] {
	background: #f8fafc;
}


/* ==========================================================================
   22. Min Display Mode (body.min)
   ========================================================================== */

body.min h1 {
	font-size: 16px !important;
	line-height: 1;
}

body.min h2 {
	display: none;
}

body.min td .literal {
	display: inline-block;
	max-width: 46em;
}

body.min .plus3 .literal {
	display: inline-block;
	max-width: 38em;
}

body.min section {
	padding: 0.4em 1.5em !important;
}

body.min .ctrl0 {
	margin: 0 0 -0.2em;
}

body.min .ctrl1 {
	margin: 0.2em 0 -0.3em;
}

body.min #prefixestext {
	height: 3.3em;
}

body.min .CodeMirror {
	height: 189px;
}

body.min select.example {
	height: 190px;
}

body.min .strigger {
	color: rgba(148, 163, 184, 0.08);
}


/* ==========================================================================
   23. Media Queries
   ========================================================================== */

@media (max-width: 1200px) {
	.queryresults {
		min-width: max(90%, 780px);
	}

	div.spread {
		grid-template-columns: 1fr 220px;
	}
}

@media (max-width: 900px) {
	div.spread {
		grid-template-columns: 1fr;
		gap: 0.625rem 0;
	}

	div.spread > .CodeMirror {
		grid-column: 1;
		grid-row: 1;
	}

	div.spread > select.example {
		grid-column: 1;
		grid-row: 2;
		height: 120px;
	}

	div.spread > .qcontrols {
		grid-column: 1;
		grid-row: 3;
	}
}

@media (max-width: 875px) {
	table.describe td.maplabel {
		vertical-align: bottom;
	}

	.queryresults {
		width: 100%;
		min-width: 100%;
	}
}

@media (max-width: 780px) {
	.queryresults {
		width: 100%;
	}

	td {
		word-break: break-all;
	}

	:root {
		--s-mg-l: 0px !important;
	}

	.qbody {
		padding: 0.75rem;
	}

	.qcontrols {
		flex-wrap: wrap;
	}

	#qsection .CodeMirror {
		height: 200px;
	}

	.isa span.sbholder {
		top: 0.15em;
	}

	span[data-pdesc] a {
		display: block;
		font-size: 11px;
	}

	a.finder {
		position: absolute;
		top: 5px;
		right: 0;
	}
}

@media (max-width: 540px) {
	:root {
		--wd-term-min: 0;
	}
}


/* ==========================================================================
   24. CodeMirror Overrides
   ========================================================================== */

/* Override inline <style> from HTML — CodeMirror lives inside the grid now */
#qsection .CodeMirror {
	margin: 0;
	border: 1px solid #e2e8f0;
	border-top: 1px solid #e2e8f0;
	border-radius: var(--radius-md);
	height: 280px;
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.875rem;
}

#qsection .CodeMirror-focused {
	border-color: #94a3b8;
	box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04), 0 0 0 2px rgb(148 163 184 / 0.15);
}

#qsection .CodeMirror-scroll {
	overflow-y: scroll !important;
	overflow-x: auto !important;
	margin-bottom: -16px;
	margin-right: -16px;
	padding-bottom: 16px;
}

/* end of file */