/*
 * Shioh style ("style B"): pastel cells over a patterned background, sidebar + one main column.
 * Framework-agnostic: plain CSS custom properties and `ss-` classes, safe to drop into any project.
 *
 * Fonts (add to <head>, or self-host):
 *   <link rel="preconnect" href="https://fonts.googleapis.com">
 *   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
 *
 * Per project: copy this file UNCHANGED (it can then be updated by replacing it), and put the site's
 * own values and rules in a second file loaded after it, e.g. site-theme.css (see
 * site-theme.example.css): override the variables in the "Project theme" block there, add section
 * colours, logo tweaks and page rules. Everything here reads from those variables. Defaults: plain black background
 * (until the site has its own pattern) and a Montserrat wordmark (until it has its own logo).
 */

:root {
	/* ===== Project theme: change these per project ===================================== */
	/* The five cell colours (defaults: the Shioh pastels). Cells rotate through them and each
	   app section owns one. Keep them light enough for #222 text (check-contrast.mjs). */
	--ss-p1: #a4b6dd; /* periwinkle */
	--ss-p2: #d09292; /* dusty rose */
	--ss-p3: #c094cc; /* lilac */
	--ss-p4: #a2d0c0; /* mint */
	--ss-p5: #c37892; /* raspberry */

	/* A page (or <body>) may set --ss-section to its section's colour; cells without their own
	   colour class use it. */

	/* Ink and accents */
	--ss-accent: #000080; /* primary buttons and focus rings (default navy) */
	--ss-ink: #222;
	--ss-muted: #333; /* passes 4.5:1 on light cells; on the darkest cell use --ss-ink for small text */
	--ss-navy: var(--ss-accent); /* alias */
	--ss-red: #800; /* emphasis, warnings, kickers */
	--ss-link: #008;

	/* Surfaces inside a cell (work on every pastel) */
	--ss-band: rgb(255 255 255 / 0.25); /* heading bands */
	/* Subtle texture on title bands (cell titles, the logo band, section headings), layered over
	   --ss-band. Default: soft diagonal stripes. A project may set its own (keep it faint). */
	--ss-band-pattern: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.2) 0 6px, transparent 6px 14px);
	--ss-panel: rgb(255 255 255 / 0.4); /* rows, tiles, list items */
	--ss-panel-strong: rgb(255 255 255 / 0.65); /* hovers, active nav */
	--ss-rule: rgb(34 34 34 / 0.25);
	--ss-border: rgb(0 0 0 / 0.35);

	/* Page background. Default: plain black. When the site has its own pattern tile, set
	   --ss-pattern: url('/pattern.png'); and --ss-pattern-size to the tile size (e.g. 240px 48px). */
	--ss-bg: #000;
	--ss-pattern: none;
	--ss-pattern-size: auto;
	--ss-overlay: rgb(0 0 0 / 0.5);

	/* Shape and spacing */
	--ss-radius: 0; /* cells and their title bands: square corners */
	--ss-radius-sm: 3px; /* buttons, inputs, rows, tiles, tabs, chips/pills: only slightly rounded */
	--ss-chip-radius: 5px; /* link chips / pills */
	--ss-chip-border: 1px solid #000; /* thin black outline on chips */
	--ss-gap: 20px; /* space between cells (and around the page) on wide screens */
	--ss-gap-phone: 8px; /* space between cells on phones */
	--ss-page-pad-phone: 4px; /* phones: cells run almost edge to edge */
	--ss-pad-y: 1.1rem;
	--ss-pad-x: 1.25rem;
	--ss-sidebar: 260px;
	--ss-max: 1240px;

	/* Type */
	--ss-font-head: 'Montserrat', 'Open Sans', system-ui, sans-serif;
	--ss-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--ss-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Page ---------- */
.ss-page,
body.ss {
	margin: 0;
	min-height: 100vh;
	color: var(--ss-ink);
	font-family: var(--ss-font-body);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	background-color: var(--ss-bg);
	background-image: linear-gradient(var(--ss-overlay), var(--ss-overlay)), var(--ss-pattern);
	background-repeat: repeat;
	background-size: auto, var(--ss-pattern-size);
	background-attachment: fixed;
}
.ss-page h1,
.ss-page h2,
.ss-page h3,
body.ss h1,
body.ss h2,
body.ss h3 {
	font-family: var(--ss-font-head);
}

/* ---------- Layout: sidebar + main column ---------- */
.ss-shell {
	display: grid;
	grid-template-columns: var(--ss-sidebar) minmax(0, 1fr);
	gap: var(--ss-gap);
	max-width: var(--ss-max);
	margin: 0 auto;
	padding: var(--ss-gap);
	align-items: start;
}
.ss-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--ss-gap);
	position: sticky;
	top: var(--ss-gap);
	/* Never taller than the screen: when the sidebar's cells don't fit, the column scrolls on its
	   own, so every part of it stays reachable while the page is scrolled anywhere. */
	max-height: calc(100vh - 2 * var(--ss-gap));
	max-height: calc(100dvh - 2 * var(--ss-gap));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.ss-main {
	display: flex;
	flex-direction: column;
	gap: var(--ss-gap);
	min-width: 0;
}
.ss-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--ss-gap);
	align-items: start;
}
/* A grid of equal cards (home pages, galleries); one column on phones. */
.ss-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--ss-gap);
	align-items: start;
}
.ss-solo {
	max-width: 760px;
	margin: 0 auto;
	padding: 3rem var(--ss-gap) 4rem;
}
@media (max-width: 860px) {
	:root {
		--ss-gap: var(--ss-gap-phone);
		--ss-pad-y: 0.7rem;
		--ss-pad-x: 0.7rem;
	}
	/* Phones: always a single column of cells. */
	.ss-shell,
	.ss-pair,
	.ss-cards {
		grid-template-columns: 1fr;
	}
	.ss-shell {
		padding: var(--ss-page-pad-phone);
	}
	.ss-sidebar {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* ---------- Cells ---------- */
.ss-cell {
	background: var(--ss-cell, var(--ss-section, var(--ss-p1)));
	color: var(--ss-ink);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius);
	box-shadow: 0 2px 12px rgb(0 0 0 / 0.28);
	padding: var(--ss-pad-y) var(--ss-pad-x) 1.35rem;
	min-width: 0;
}
.ss-p1 { --ss-cell: var(--ss-p1); }
.ss-p2 { --ss-cell: var(--ss-p2); }
.ss-p3 { --ss-cell: var(--ss-p3); }
.ss-p4 { --ss-cell: var(--ss-p4); }
.ss-p5 { --ss-cell: var(--ss-p5); }
/* Heading band flush with the top of a cell. */
.ss-band {
	margin: calc(-1 * var(--ss-pad-y)) calc(-1 * var(--ss-pad-x)) var(--ss-pad-y);
	padding: 0.6rem var(--ss-pad-x);
	background: var(--ss-band-pattern), var(--ss-band);
	border-radius: var(--ss-radius) var(--ss-radius) 0 0;
	text-align: center;
	font-family: var(--ss-font-head);
	font-weight: 700;
	font-size: 1.3rem;
	position: relative;
}
.ss-band .ss-band-action {
	position: absolute;
	right: var(--ss-pad-x);
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--ss-font-body);
	font-weight: 400;
	font-size: 0.85rem;
}
/* Section heading inside a cell (a smaller band). */
.ss-section {
	font-family: var(--ss-font-head);
	font-size: 1.05rem;
	font-weight: 700;
	margin: 1.4rem 0 0.6rem;
	padding: 0.35rem 0.7rem;
	background: var(--ss-band-pattern), var(--ss-band);
	border-radius: var(--ss-radius-sm);
}
.ss-title {
	font-family: var(--ss-font-head);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 1rem;
	padding-bottom: 0.35rem;
	border-bottom: 2px solid var(--ss-rule);
}
.ss-kicker {
	color: var(--ss-red);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---------- Sidebar pieces ---------- */
/* The logo: a Montserrat wordmark by default (put the site name as text inside .ss-logo); swap in
   an <img> once the site has a logo. */
.ss-logo {
	display: block;
	margin: calc(-1 * var(--ss-pad-y)) calc(-1 * var(--ss-pad-x)) 0.5rem;
	padding: 0.7rem;
	background: var(--ss-band-pattern), var(--ss-band);
	border-radius: var(--ss-radius) var(--ss-radius) 0 0;
	text-align: center;
	font-family: var(--ss-font-head);
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--ss-ink);
	text-decoration: none;
}
.ss-logo img {
	width: 100%;
	max-width: 170px;
	height: auto;
}
.ss-nav {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ss-nav a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.6rem;
	border-radius: var(--ss-radius-sm);
	color: var(--ss-ink);
	text-decoration: none;
}
.ss-nav a:hover { background: rgb(255 255 255 / 0.3); }
.ss-nav a[aria-current='page'],
.ss-nav a.active { background: var(--ss-panel-strong); font-weight: 600; }
.ss-nav hr { border: 0; border-top: 1px solid var(--ss-rule); margin: 0.4rem 0; }
.ss-avatar {
	display: inline-grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	font-weight: 700;
	border: 1px solid rgb(0 0 0 / 0.3);
	background: repeating-linear-gradient(45deg, var(--ss-p1) 0 6px, var(--ss-p2) 6px 12px, var(--ss-p3) 12px 18px, var(--ss-p4) 18px 24px);
	flex-shrink: 0;
}

/* ---------- Content inside cells ---------- */
.ss-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ss-row { display: flex; align-items: center; gap: 0.7rem; background: var(--ss-panel); border-radius: var(--ss-radius-sm); padding: 0.55rem 0.75rem; }
.ss-row:hover { background: var(--ss-panel-strong); }
.ss-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; }
.ss-stat { display: flex; flex-direction: column; background: var(--ss-panel); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-sm); padding: 0.7rem 0.9rem; }
.ss-stat b { font-size: 1.5rem; line-height: 1.1; }
.ss-stat span { font-size: 0.8rem; color: var(--ss-muted); }
.ss-bar { height: 6px; border-radius: 99px; background: rgb(255 255 255 / 0.5); overflow: hidden; margin-top: 4px; }
.ss-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--ss-accent); }
.ss-muted { color: var(--ss-muted); }
.ss-chip { display: inline-block; background: var(--ss-panel-strong); border-radius: var(--ss-chip-radius); border: var(--ss-chip-border); padding: 0.1rem 0.6rem; font-size: 0.8rem; }
:where(.ss-cell) a:where(:not(.ss-btn):not(.ss-logo)) { color: inherit; text-underline-offset: 3px; }
.ss-link { color: var(--ss-link) !important; }

/* ---------- Controls ---------- */
.ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font: inherit;
	font-size: 0.95rem;
	padding: 0.5rem 1rem;
	border-radius: var(--ss-radius-sm);
	border: 1px solid #222;
	background: #fff;
	color: var(--ss-ink);
	cursor: pointer;
	text-decoration: none;
}
.ss-btn:hover { background: #f3f1f7; }
.ss-btn-primary { background: var(--ss-accent); border-color: var(--ss-accent); color: #fff; font-weight: 600; }
.ss-btn-primary:hover { background: var(--ss-accent); opacity: 0.9; }
.ss-btn:disabled { opacity: 0.5; cursor: default; }
.ss-input,
:where(.ss-cell) input:where(:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color'])),
:where(.ss-cell) select,
:where(.ss-cell) textarea {
	background: #fff;
	color: var(--ss-ink);
	border: 1px solid rgb(34 34 34 / 0.35);
	border-radius: var(--ss-radius-sm);
	padding: 0.5rem;
	font: inherit;
}
:where(.ss-cell) textarea { font-family: var(--ss-font-mono); font-size: 0.9rem; }
:where(.ss-cell) input:focus,
:where(.ss-cell) select:focus,
:where(.ss-cell) textarea:focus { outline: 2px solid var(--ss-accent); outline-offset: 1px; }
.ss-label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; color: var(--ss-muted); }
.ss-notice { padding: 0.6rem 0.9rem; border-radius: var(--ss-radius-sm); margin-bottom: 1rem; }
.ss-notice.ok { background: #e7f3e8; color: #1d5c2a; }
.ss-notice.err { background: #fbe9e7; color: #8a1c10; }
.ss-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; background: rgb(255 255 255 / 0.3); border-radius: var(--ss-radius-sm); margin: 0 0 1.25rem; }
.ss-tabs a { padding: 0.35rem 0.8rem; border-radius: var(--ss-radius-sm); color: var(--ss-ink); text-decoration: none; }
.ss-tabs a[aria-current='page'], .ss-tabs a.active { background: rgb(255 255 255 / 0.8); font-weight: 600; }
.ss-table { width: 100%; border-collapse: collapse; }
.ss-table th { text-align: left; font-weight: 700; border-bottom: 2px solid var(--ss-rule); padding: 0.4rem; }
.ss-table td { border-bottom: 1px solid var(--ss-rule); padding: 0.4rem; }

/* ---------- White surface inside a cell ----------
   For things that need a plain white background: game boards, editors, tables, previews, code.
   Rows and tiles inside it use a faint grey instead of translucent white. */
.ss-surface {
	--ss-panel: rgb(0 0 0 / 0.04);
	--ss-panel-strong: rgb(0 0 0 / 0.08);
	background: #fff;
	color: var(--ss-ink);
	border: 1px solid var(--ss-border);
	border-radius: var(--ss-radius-sm);
	padding: 0.75rem;
	min-width: 0;
}
.ss-surface-flush { padding: 0; overflow: hidden; }

/* ---------- Keyboard focus ----------
   Every interactive element shows a ring when reached by keyboard (not on mouse click). */
:where(.ss-page, body.ss) :where(a, button, summary, select, input, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--ss-focus, var(--ss-accent));
	outline-offset: 2px;
}

/* ---------- Phone menu ----------
   Mark the sidebar's logo + nav cell with .ss-navcell and add a menu button after the logo:
     <button class="ss-btn ss-menu-btn" type="button" aria-controls="site-nav">Menu</button>
   and give the .ss-nav id="site-nav". On phones the cell becomes a slim bar (logo + Menu) and the
   nav opens below it, so page content stays near the top. Needs assets/shioh.js, and this in
   <head> before the stylesheet so there is no flash of the open nav:
     <script>document.documentElement.classList.add('ss-js')</script>
   Without JavaScript the nav simply stays open. Other sidebar cells: add .ss-desktop-only to hide
   them on phones (repeat what matters in a footer cell marked .ss-phone-only). */
.ss-menu-btn,
.ss-phone-only {
	display: none;
}
.ss-logo small {
	display: block;
	font-family: var(--ss-font-body);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--ss-muted);
}
@media (max-width: 860px) {
	.ss-navcell {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		padding: 0;
	}
	.ss-navcell .ss-logo {
		margin: 0;
		padding: 0.45rem 0.8rem;
		text-align: left;
		background: none;
		font-size: 1.2rem;
	}
	.ss-navcell .ss-logo small {
		display: none;
	}
	.ss-js .ss-menu-btn {
		display: block;
		margin: 0 0.6rem;
		padding: 0.3rem 0.8rem;
		font-weight: 600;
	}
	.ss-navcell .ss-nav {
		grid-column: 1 / -1;
		padding: 0.25rem 0.5rem 0.6rem;
		border-top: 1px solid var(--ss-rule);
	}
	.ss-js .ss-navcell:not(.open) .ss-nav {
		display: none;
	}
	.ss-desktop-only {
		display: none;
	}
	.ss-phone-only {
		display: block;
	}
}

/* ---------- Dialogs ----------
   A dialog is a cell like any other: <dialog class="ss-cell ss-dialog"> with an .ss-band title,
   the body, and an .ss-dialog-actions row (primary button last). It takes the page's section
   colour unless given its own (ss-p1…). ssConfirm() in shioh.js builds one for you. */
.ss-dialog {
	width: min(92vw, 520px);
	max-height: 85vh;
	overflow: auto;
	margin: auto;
	padding: var(--ss-pad-y) var(--ss-pad-x) 1.1rem;
	box-shadow: 0 10px 40px rgb(0 0 0 / 0.5);
}
.ss-dialog::backdrop {
	background: rgb(0 0 0 / 0.55);
}
.ss-dialog p {
	margin: 0 0 0.9rem;
}
.ss-dialog-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* ---------- Toasts ----------
   Short confirmations ("Copied", "Saved") as white chips stacked in the bottom-right corner
   (bottom-centre on phones). They don't take focus and go away on their own. Use ssToast() from
   shioh.js; it adds the .ss-toasts container (an aria-live region) on first use. */
.ss-toasts {
	position: fixed;
	right: var(--ss-gap);
	bottom: var(--ss-gap);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	pointer-events: none;
}
/* The stack is a manual popover (top layer); undo the browser's default popover box. */
.ss-toasts[popover] {
	inset: auto var(--ss-gap) var(--ss-gap) auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
	color: inherit;
}
.ss-toast {
	pointer-events: auto;
	max-width: min(90vw, 380px);
	padding: 0.45rem 0.85rem;
	background: #fff;
	color: var(--ss-ink);
	border: var(--ss-chip-border);
	border-radius: var(--ss-chip-radius);
	box-shadow: 0 3px 14px rgb(0 0 0 / 0.35);
	font-size: 0.92rem;
	line-height: 1.4;
	animation: ss-toast-in 0.18s ease-out;
}
.ss-toast.ss-toast-error {
	border-color: var(--ss-red);
	color: var(--ss-red);
	font-weight: 600;
}
.ss-toast.ss-toast-out {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s, transform 0.2s;
}
@keyframes ss-toast-in {
	from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
	.ss-toast { animation: none; }
	.ss-toast.ss-toast-out { transition: none; }
}
@media (max-width: 860px) {
	.ss-toasts,
	.ss-toasts[popover] {
		left: auto;
		top: auto;
		right: 50%;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		transform: translateX(50%);
		align-items: center;
	}
	.ss-dialog {
		width: calc(100vw - 2 * var(--ss-page-pad-phone) - 4px);
	}
}

/* ---------- Print ----------
   Ink-friendly by default: no dark background, white cells with a thin rule, no sidebar, no
   buttons. Mark extra things to drop with .ss-noprint and print-only notes with .ss-print-only.
   Put .ss-print-colour on a cell to keep its colour when printed. */
.ss-print-only {
	display: none;
}
@media print {
	.ss-page,
	body.ss {
		background: #fff !important;
		color: #000;
		font-size: 11pt;
	}
	.ss-sidebar,
	.ss-menu-btn,
	.ss-btn,
	.ss-toasts,
	.ss-noprint {
		display: none !important;
	}
	.ss-print-only {
		display: block;
	}
	.ss-shell {
		display: block;
		max-width: none;
		padding: 0;
	}
	.ss-main,
	.ss-pair,
	.ss-cards {
		display: block;
	}
	.ss-cell {
		background: #fff;
		border: 1px solid #999;
		box-shadow: none;
		margin: 0 0 12pt;
		break-inside: avoid;
	}
	.ss-print-colour {
		background: var(--ss-cell, var(--ss-section, var(--ss-p1)));
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
	.ss-band,
	.ss-logo,
	.ss-section {
		background: none;
		border-bottom: 1px solid #999;
	}
}