/* Hancocks IT's design (tiles, header, light, dark and grey) in Svarslinjen's
   green. --accent is for links and buttons; --brand fills the brand's own
   surfaces (the logo, the big tile), which stay saturated in both themes.
   Dark follows the device unless the visitor picks one with the header's
   switch (app/static/theme.js sets data-theme on <html>). */
:root {
	--bg: #fbfaf6;
	--fg: #1b1f1d;
	--muted: #5b6b66;
	--accent: #1f6f5c;
	--accent-fg: #ffffff;
	--card: #ffffff;
	--border: #e3e0d6;
	--bad-fg: #a12a1f; --flag-bg: #fbeae8;
	--brand: #1f7a63;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) {
		--bg: #101614; --fg: #e9ece9; --muted: #a1aca8; --accent: #6fd3b5;
		--accent-fg: #08261f; --card: #19201e; --border: #2a3431;
		--bad-fg: #f0948a; --flag-bg: #3a1c18;
		--brand: #23806a;
		color-scheme: dark;
	}
}
:root[data-theme="dark"], :root[data-theme="grey-dark"] {
	--bg: #101614; --fg: #e9ece9; --muted: #a1aca8; --accent: #6fd3b5;
	--accent-fg: #08261f; --card: #19201e; --border: #2a3431;
	--bad-fg: #f0948a; --flag-bg: #3a1c18;
	--brand: #23806a;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--bg); color: var(--fg);
	font: 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--accent); }
[hidden] { display: none !important; }

header.site, footer.site {
	display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
	padding: 14px 20px; max-width: 1040px; width: 100%; margin: 0 auto;
}
header.site { border-bottom: 1px solid var(--border); }
footer.site { border-top: 1px solid var(--border); margin-top: auto; color: var(--muted); font-size: 15px; }
.brand { font-weight: 700; font-size: 20px; color: var(--fg); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.brand-mark {
	display: inline-grid; place-items: end start; width: 36px; height: 36px; border-radius: 3px; padding: 0 0 3px 6px;
	background: var(--brand); color: #fff; font-size: 18px; font-weight: 800; line-height: 1;
}
header.site nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
header.site nav a { text-decoration: none; color: var(--muted); }
header.site nav a:hover { color: var(--fg); }
/* The nav as small tiles (_header.html), each in its page's colour */
header.site nav a.nav-tile {
	display: block; padding: 7px 12px; border-radius: 3px; background: var(--tile); color: #fff;
	font-size: 15px; font-weight: 600; line-height: 1.3; transition: transform .15s ease, filter .15s ease;
	position: relative;
}
header.site nav a.nav-tile.c-yellow, header.site nav a.nav-tile.c-sand { color: #1b1b1a; }
header.site nav a.nav-tile:hover { color: #fff; filter: brightness(1.1); }
header.site nav a.nav-tile.c-yellow:hover, header.site nav a.nav-tile.c-sand:hover { color: #1b1b1a; }
header.site nav a.nav-tile:active { transform: scale(.95); }
header.site nav a.nav-tile[aria-current="page"]::after {
	content: ""; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 2px; background: currentColor; opacity: .7;
}
.nav-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
header.site nav .lang-switch, header.site nav .theme-toggle { margin-left: 6px; }
:root[data-theme="dark"] header.site nav a.nav-tile.c-sand, :root[data-theme="grey-dark"] header.site nav a.nav-tile.c-sand { color: #ece3cf; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) header.site nav a.nav-tile.c-sand { color: #ece3cf; }
}
/* On a phone: the logo, flag and slider on one row, the nav tiles in a
   grid under them */
@media (max-width: 720px) {
	body:not(.admin) header.site { display: grid; grid-template-columns: 1fr auto auto; gap: 10px 8px; }
	body:not(.admin) header.site nav { display: contents; }
	body:not(.admin) header.site > .brand { grid-column: 1; grid-row: 1; }
	body:not(.admin) header.site nav .lang-switch { grid-column: 2; grid-row: 1; margin: 0; }
	body:not(.admin) header.site nav .theme-toggle { grid-column: 3; grid-row: 1; margin: 0; }
	.nav-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); }
	.nav-tiles a.nav-tile:only-child { grid-column: 1 / -1; }
	header.site nav a.nav-tile { padding: 9px 12px; text-align: center; }
}
.lang-switch { display: inline-flex; align-items: center; padding: 4px; border-radius: 6px; }
.lang-switch:hover { background: var(--border); }
.lang-switch .flag { width: 27px; height: 18px; }
.lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.flag { display: inline-block; border-radius: 2px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, .25); vertical-align: middle; }
.built-in { white-space: nowrap; }
.built-in .flag { width: 1.35em; height: 0.85em; vertical-align: -0.08em; }

main { max-width: 760px; width: 100%; margin: 0 auto; padding: 24px 20px 48px; flex: 1; }
h1 { font-size: 2rem; line-height: 1.2; margin: .2em 0 .6em; }
h2 { font-size: 1.25rem; margin: 1.8em 0 .5em; }
li { margin: 0.3rem 0; }
.updated { color: var(--muted); font-size: 14px; margin-top: 2.5em; }
.lead { font-size: 1.15rem; }
.note { color: var(--muted); font-size: 0.95rem; margin: 0.4rem 0 1rem; }
.error { color: var(--bad-fg); font-weight: 600; }

/* Forms: paying, signing in, the call button */
form { margin: 1.25rem 0 0.25rem; }
label { display: block; margin: 1rem 0 0.3rem; font-weight: 600; }
input[type=tel], input[inputmode=numeric] {
	width: 100%; padding: 0.8rem; font: inherit; font-size: 1.2rem;
	border: 2px solid var(--border); border-radius: 0.6rem; background: var(--card); color: var(--fg);
}
select, textarea {
	width: 100%; font: inherit; padding: 0.5rem; border: 2px solid var(--border); border-radius: 0.5rem;
	background: var(--card); color: var(--fg);
}
.pay {
	width: 100%; padding: 1rem; font: inherit; font-size: 1.15rem; font-weight: 700; border-radius: 4px;
	border: 2px solid var(--accent); background: var(--accent); color: var(--accent-fg); cursor: pointer;
}
.pay:hover { filter: brightness(1.06); }
a.pay { display: block; text-align: center; text-decoration: none; }
input + .pay { margin-top: 0.8rem; }
.pay-card { background: transparent; color: var(--accent); }
.call-button {
	display: block; width: 100%; margin: 1.5rem 0 1rem; padding: 1.6rem 1rem; font: inherit; font-size: 1.5rem;
	font-weight: 700; color: #fff; background: var(--brand); border: none; border-radius: 4px; cursor: pointer;
}
.call-button:disabled { opacity: 0.6; }
.call-button.hangup { background: #b3261e; }
.clock { font-size: 2rem; font-variant-numeric: tabular-nums; margin: 0.5rem 0; }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; color: var(--muted); }
.check input { margin-top: 0.35rem; width: 1.2rem; height: 1.2rem; flex: none; }
details#buy { margin: 0.5rem 0 1rem; }
details#buy summary { cursor: pointer; font-weight: 600; color: var(--accent); }
details#buy .pay { margin-top: 0.6rem; }
.linkish { background: none; border: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.inline { display: inline; margin: 0; }

/* Admin */
.admin header.site, .admin main { max-width: 72rem; }
.admin header.site nav { font-size: 0.95rem; }
table.calls { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.calls th, table.calls td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr.flagged { background: var(--flag-bg); }
pre.transcript { white-space: pre-wrap; font-size: 0.85rem; background: var(--card); border: 1px solid var(--border); padding: 1rem; border-radius: 0.5rem; }

/* The latest answers (app/templates/latest.html) */
.latest article { border-top: 1px solid var(--border); padding: 0.75rem 0; }
.latest h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.latest article p { margin: 0; }
.latest .when { color: var(--muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* Inner pages: the title on a block of colour (as on Hancocks IT's), the
   colour class (c-*) on <main> */
/* The colour is only the title's: dark-mode tile rules mustn't paint <main> */
main.banner { background: none !important; color: var(--fg) !important; }
main.banner > h1:first-child {
	margin: 0 0 .7em; padding: 30px 28px 26px; border-radius: 4px; line-height: 1.1;
	font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.01em; background: var(--tile); color: var(--tile-fg, #fff);
}
main.banner.c-navy { --tile: #23395d; }
main.banner.c-sand { --tile: #e9dcc0; --tile-fg: #1b1b1a; }
:root[data-theme="dark"] main.banner.c-sand, :root[data-theme="grey-dark"] main.banner.c-sand { --tile: #3a342a; --tile-fg: #ece3cf; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) main.banner.c-sand { --tile: #3a342a; --tile-fg: #ece3cf; }
}
:root[data-theme="dark"] main.banner > h1:first-child, :root[data-theme="grey-dark"] main.banner > h1:first-child { filter: saturate(.92) brightness(.9); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) main.banner > h1:first-child { filter: saturate(.92) brightness(.9); }
}

/* The front page (app/templates/home.html): a wall of tiles */
main.home { max-width: 1040px; }
.home-more { max-width: 760px; margin-top: 2em; }
a.button {
	display: inline-block; background: var(--accent); color: var(--accent-fg); border: 2px solid var(--accent);
	border-radius: 4px; padding: 10px 18px; font-weight: 700; text-decoration: none;
}
a.button:hover { filter: brightness(1.08); }
a.button.light { background: #fff; color: #0f3f33; border-color: #fff; }
a.button.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
a.button.ghost:hover { background: rgba(255, 255, 255, .12); }

.wall {
	display: grid; gap: 10px; margin-top: 4px;
	grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(clamp(150px, 22vw, 236px), auto); grid-auto-flow: dense;
}
.tl {
	position: relative; overflow: hidden; display: flex; flex-direction: column;
	padding: 18px 18px 44px; color: #fff; text-decoration: none; border-radius: 4px;
	transition: transform .15s ease, filter .15s ease;
}
a.tl:hover { filter: brightness(1.07); }
a.tl:active { transform: scale(.97); }      /* the Windows Phone "press" */
a.tl:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.tl-big { grid-column: span 2; grid-row: span 2; padding: 28px 28px; }
.tl-wide { grid-column: span 2; }
.tl p { margin: 0; }
.tl-icon { display: block; }
.tl-icon .icon { width: 30px; height: 30px; }
.tl-icon.big .icon { width: 44px; height: 44px; stroke-width: 1.6; }
.tl-title { font-size: 1.15rem; font-weight: 700; line-height: 1.2; margin-top: 12px !important; }
.tl-text { font-size: 15px; line-height: 1.4; opacity: .92; margin-top: 6px !important; }
.tl-kicker { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.tl-headline { font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin-top: 8px !important; }
.tl-big-number { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; letter-spacing: .01em; margin-top: 10px !important; font-variant-numeric: tabular-nums; }
.tl-label { position: absolute; left: 18px; bottom: 14px; font-size: 14px; font-weight: 600; opacity: .95; }

/* The big intro tile */
.tl-intro { padding-bottom: 0 !important; }
.tl-intro .eyebrow { margin-top: auto !important; font-weight: 700; font-size: 14px; letter-spacing: .03em; opacity: .9; }
.tl-intro h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.05; letter-spacing: -.02em; margin: .25em 0 .35em; }
.tl-intro .lede { font-size: 1.05rem; line-height: 1.5; opacity: .92; max-width: 30em; }
.tl-intro .actions {
	display: grid; grid-template-columns: 1fr 1fr; margin: auto -28px 0 !important; width: calc(100% + 56px);
	min-height: 64px; padding-top: 0;
	flex-shrink: 0;  /* squeezed, the strip was shorter than its buttons, which then hung out of the tile, cut off */
}
.tl-intro > * { flex-shrink: 0; }
.tl-intro .actions a.button {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; border-radius: 0;
	padding: 14px 28px; font-size: 1.05rem; transition: background .15s ease;
}
.tl-intro .actions a.button:first-child { border-bottom-left-radius: 4px; }
.tl-intro .actions a.button:last-child { border-bottom-right-radius: 4px; }
.tl-intro .actions a.button.light { background: rgba(255, 255, 255, .95); color: #0f3f33; }
.tl-intro .actions a.button.ghost { background: rgba(0, 0, 0, .22); color: #fff; }
.tl-intro .actions a.button.ghost:hover { background: rgba(0, 0, 0, .32); }
.tl-intro .actions a.button:hover { filter: none; }
.tl-intro .actions a.button .icon { width: 20px; height: 20px; flex: none; transition: transform .15s ease; }
.tl-intro .actions a.button:hover .icon { transform: translateX(3px); }
.tl-intro .lede { margin-bottom: 8px !important; }
.tl-intro .cost { font-size: 14px; opacity: .85; margin-bottom: 24px !important; max-width: 34em; }

/* Tiles that turn over (app/static/tiles.js): the front (a button) and the
   back share one grid cell, so a tile is as tall as its taller side, and the
   back's button fills its bottom quarter. Hover turns them with a mouse; a
   tap, a click or Enter sets .flipped. */
.wall .tl.flip { display: grid; grid-template: 1fr / 1fr; padding: 0; perspective: 1100px; overflow: visible; background: none !important; }
.tl.flip > .side { grid-area: 1 / 1; }
.side {
	position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left;
	padding: 18px 18px 20px; border-radius: 4px; color: inherit; font: inherit; border: 0; margin: 0;
	background: var(--tile); backface-visibility: hidden; -webkit-backface-visibility: hidden;
	transition: transform .5s cubic-bezier(.3, .7, .3, 1), visibility 0s .25s;
}
button.side { cursor: pointer; width: 100%; }
button.side:hover { filter: none; }
.side.back { transform: rotateY(-180deg); visibility: hidden; padding-bottom: 0; }
.flip.flipped .front { transform: rotateY(180deg); visibility: hidden; }
.flip.flipped .back { transform: rotateY(0); visibility: visible; }
@media (hover: hover) {
	.flip:hover .front { transform: rotateY(180deg); visibility: hidden; }
	.flip:hover .back { transform: rotateY(0); visibility: visible; }
}
/* The side coming round is focusable at once; the one going away only goes
   when it's edge-on, so it doesn't vanish mid-turn */
.flip.flipped .back, .flip:not(.flipped) .front { transition-delay: 0s, 0s; }
@media (hover: hover) { .flip:hover .back { transition-delay: 0s, 0s; } }
.front:focus-visible, .tl-go:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.tl-big.flip .side { padding: 28px; }
.side .tl-title { display: block; }
.tl-sub { display: block; font-size: 15px; line-height: 1.4; opacity: .9; margin-top: 6px; }
.turn-hint { position: absolute; top: 14px; right: 14px; opacity: .55; }
.turn-hint .icon { width: 16px; height: 16px; }
.back-text { flex: 1; width: 100%; }
.tl-headlines { margin: 8px 0 0; padding-left: 1.1em; font-weight: 700; line-height: 1.3; }
.tl-headlines li { margin: 4px 0; }
.tl-go {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin: 12px -18px 0; width: calc(100% + 36px); min-height: 25%; padding: 12px 18px;
	background: rgba(0, 0, 0, .2); color: inherit; font-weight: 700; text-decoration: none; border-radius: 0 0 4px 4px;
}
.tl-go:hover { background: rgba(0, 0, 0, .3); }
.tl-go .icon { width: 20px; height: 20px; flex: none; transition: transform .15s ease; }
.tl-go:hover .icon { transform: translateX(3px); }
.c-yellow .tl-go, .c-sand .tl-go { background: rgba(0, 0, 0, .1); }
.c-yellow .tl-go:hover, .c-sand .tl-go:hover { background: rgba(0, 0, 0, .17); }
@media (prefers-reduced-motion: reduce) {
	.side { transition: none; transform: none !important; }
	a.tl:active { transform: none; }
}

/* Colours: flat and bold. White text on all but the light ones. */
.c-brand { --tile: var(--brand); background: var(--tile); }
.c-coral { --tile: #d9482b; background: var(--tile); }
.c-yellow { --tile: #ffcd00; background: var(--tile); color: #1b1b1a; }
.c-red { --tile: #c8102e; background: var(--tile); }
.c-blue { --tile: #0058a3; background: var(--tile); }
.c-orange { --tile: #c4501a; background: var(--tile); }
.c-navy { --tile: #23395d; background: var(--tile); }
.c-berry { --tile: #a3245c; background: var(--tile); }
.c-sky { --tile: #1b7fb3; background: var(--tile); }
.c-plum { --tile: #5b3b8c; background: var(--tile); }
.c-charcoal { --tile: #2b2d31; background: var(--tile); }
.c-sand { --tile: #e9dcc0; background: var(--tile); color: #1b1b1a; }

@media (max-width: 720px) {
	.wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(44vw, auto); gap: 8px; }
	.tl-big { grid-row: auto; padding: 24px 20px; }
	.tl-intro .actions { margin: auto -20px 0 !important; width: calc(100% + 40px); }
	.tl-intro .actions a.button { padding: 14px 16px; font-size: 1rem; }
	.tl { padding: 14px 14px 40px; }
	.side { padding: 14px 14px 16px; }
	.tl-go { margin: 10px -14px 0; width: calc(100% + 28px); padding: 10px 14px; }
	.tl-sub { font-size: 14px; }
	.tl-label { left: 14px; bottom: 12px; font-size: 13px; }
	.tl-text { font-size: 14px; }
	.tl-headline { font-size: 1.05rem; }
	.tl-icon.big .icon { width: 36px; height: 36px; }
	.wide-only { display: none; }      /* a wide tile is only one row tall here */
}
@media (max-width: 560px) {
	header.site nav { gap: 6px 14px; font-size: 15px; }
}

/* The theme switch (app/static/theme.js): a tiny three-way slider, sun |
   cloud | moon, its thumb under the mode you're in; hidden until the script
   shows it */
.theme-toggle {
	position: relative; display: inline-flex; padding: 2px; border-radius: 999px;
	background: var(--border); --pos: 0;
}
.theme-toggle[data-pos="grey"] { --pos: 1; }
.theme-toggle[data-pos="dark"] { --pos: 2; }
.theme-toggle::before {
	content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transform: translateX(calc(var(--pos) * 24px)); transition: transform .2s ease;
}
.theme-toggle button {
	position: relative; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
	background: none; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle button:hover, .theme-toggle button[aria-checked="true"] { color: var(--fg); }
.theme-toggle .icon { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle::before { transition: none; } }

/* Grey mode: everything in shades of grey, on a light or a dark page
   depending on which mode you came from (grey-light, grey-dark) */
:root[data-theme^="grey"] body { filter: grayscale(1); }

/* Tiles in the dark: the same colours, a touch deeper so they don't glare */
:root[data-theme="dark"] .wall .tl, :root[data-theme="grey-dark"] .wall .tl { filter: saturate(.92) brightness(.9); }
:root[data-theme="dark"] .wall a.tl:hover, :root[data-theme="grey-dark"] .wall a.tl:hover { filter: saturate(.92) brightness(1); }
:root[data-theme="dark"] .c-sand, :root[data-theme="grey-dark"] .c-sand { --tile: #3a342a; background: var(--tile); color: #ece3cf; }
:root[data-theme="dark"] .c-charcoal, :root[data-theme="grey-dark"] .c-charcoal { --tile: #2a2f3a; background: var(--tile); }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) .wall .tl { filter: saturate(.92) brightness(.9); }
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) .wall a.tl:hover { filter: saturate(.92) brightness(1); }
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) .c-sand { --tile: #3a342a; background: var(--tile); color: #ece3cf; }
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) .c-charcoal { --tile: #2a2f3a; background: var(--tile); }
}

/* Tiles arriving (app/static/tiles.js): hidden until they start sliding in
   from the right, and shown after a moment whatever happens */
html, body { overflow-x: clip; }
.tiles-arriving .wall > .tl, .tiles-arriving header.site > .brand, .tiles-arriving .nav-tiles > *, .tiles-arriving header.site nav > :not(.nav-tiles) { opacity: 0; animation: tiles-show 0s 1.2s forwards; }
@keyframes tiles-show { to { opacity: 1; } }

/* Turning between pages (app/static/flip.js): an arriving page waits
   edge-on for its turn, and shows anyway after a moment */
.turn-arriving body > main, .turn-arriving body > footer { opacity: 0; animation: tiles-show 0s 1.2s forwards; }

/* Waiting mid-turn (app/static/flip.js): if the next page is slow to come,
   three little tiles pulse where the page was */
.turn-wait {
	position: fixed; inset: 0; display: grid; place-content: center; grid-auto-flow: column; gap: 8px;
	pointer-events: none; opacity: 0; animation: turn-wait-show .2s .15s forwards;
}
.turn-wait span { width: 18px; height: 18px; border-radius: 2px; animation: turn-wait-pulse 1s ease-in-out infinite; }
.turn-wait span:nth-child(1) { background: var(--brand); }
.turn-wait span:nth-child(2) { background: #ffcd00; animation-delay: .15s; }
.turn-wait span:nth-child(3) { background: #c8102e; animation-delay: .3s; }
@keyframes turn-wait-show { to { opacity: 1; } }
@keyframes turn-wait-pulse { 0%, 100% { transform: scale(.6) rotateY(0); opacity: .5; } 50% { transform: scale(1) rotateY(180deg); opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .turn-wait span { animation: none; } }

/* The call dialog (home.html, opened by tiles.js for tel: links) */
dialog.call {
	width: min(440px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 4px; overflow: hidden;
	background: var(--card); color: var(--fg); box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
dialog.call[open] { animation: call-in .35s cubic-bezier(.2, .75, .25, 1); }
dialog.call::backdrop { background: rgba(10, 12, 16, .55); }
dialog.call form { margin: 0; }
@keyframes call-in { from { transform: perspective(900px) rotateY(-70deg); opacity: 0; } }
.call-head { padding: 22px 24px 20px; color: #fff; background: var(--tile); }
.call-head h2 { margin: 10px 0 2px; font-size: 1.3rem; }
.call-number { margin: 0; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.call-note { margin: 16px 24px; color: var(--muted); font-size: 15px; }
.call-ways { display: grid; grid-template-columns: 1fr 1fr; }
.call-way {
	display: flex; align-items: center; gap: 10px; padding: 18px 20px; min-height: 72px;
	background: var(--tile); color: #fff; font-weight: 700; text-decoration: none;
}
.call-way:hover { filter: brightness(1.08); }
.call-way .icon { width: 22px; height: 22px; flex: none; }
.call-close {
	position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border-radius: 4px;
	background: rgba(0, 0, 0, .2); color: #fff; font-size: 22px; line-height: 1;
}
@media (prefers-reduced-motion: reduce) { dialog.call[open] { animation: none; } }

/* The dialog's number, with the flag for callers from abroad */
.call-number .flag { width: 1.1em; height: .7em; vertical-align: .05em; margin-right: .15em; }
.call-way small { display: block; font-size: 13px; font-weight: 400; opacity: .9; margin-top: 2px; }

/* The buy page (buy.html): the prices as tiles, then the buy buttons */
.price-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 20px 0 8px; }
.price { display: flex; flex-direction: column; padding: 16px 18px; border-radius: 4px; background: var(--tile); color: #fff; min-height: 130px; }
.price.c-sand, .price.c-yellow { color: #1b1b1a; }
.price-min { font-size: 1.6rem; font-weight: 800; line-height: 1.1; }
.price-kr { font-size: 1.15rem; font-weight: 700; margin-top: 2px; }
.price-note { font-size: 14px; opacity: .85; margin-top: auto; padding-top: 10px; }
.buy-buttons { display: grid; gap: 10px; }
#ready h2, #signin h2 { margin-top: 1.4em; }
:root[data-theme="dark"] .price.c-sand, :root[data-theme="grey-dark"] .price.c-sand { color: #ece3cf; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="grey-light"]) .price.c-sand { color: #ece3cf; }
}

/* Info and warning boxes, the same on hancocksit.com and svarslinjen.se: a
   tinted panel with a thin border and a coloured edge, a small square badge
   like a tile, square tile bullets, and a serif body so a note reads apart
   from the page around it (every device has one; the CSP allows no web
   fonts). A box that opens with a heading carries the badge in a heading
   row; one without has it at the side. In Markdown:
   <div class="infobox" markdown="1"> … </div>, or "warnbox". */
.infobox, .warnbox {
	--box-tint: color-mix(in srgb, var(--box) 9%, var(--bg));
	--box-line: color-mix(in srgb, var(--box) 30%, var(--bg));
	--box-ink: color-mix(in srgb, var(--box) 78%, var(--fg));
	position: relative; margin: 28px 0; padding: 16px 22px 16px 64px; border-radius: 4px;
	background: var(--card); background: var(--box-tint);
	border: 1px solid var(--border); border-color: var(--box-line); border-left: 6px solid var(--box);
	font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; font-size: 1.03em; line-height: 1.55;
}
.infobox { --box: #1b7fb3; }
.warnbox { --box: #c8102e; }
.infobox::before, .warnbox::before, .infobox > :is(h2, h3, summary):first-child::before {
	width: 28px; height: 28px; border-radius: 3px; flex: none;
	display: inline-grid; place-items: center; background: var(--box); color: #fff;
	font: 800 16px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: 0; text-transform: none;
}
.infobox::before, .warnbox::before { position: absolute; left: 18px; top: 16px; }
.infobox::before, .infobox > :is(h2, h3, summary):first-child::before { content: "i"; }
.warnbox::before { content: "!"; }
/* With a heading: the badge moves into the heading row, over a thin rule */
.infobox:has(> :is(h2, h3, summary):first-child) { padding-left: 22px; }
.infobox:has(> :is(h2, h3, summary):first-child)::before { content: none; }
.infobox > :is(h2, h3, summary):first-child {
	display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding-bottom: 12px;
	border-bottom: 1px solid var(--box-line);
}
.infobox h2, .infobox h3, .warnbox h2, .warnbox h3, .infobox > summary {
	font: 700 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	text-transform: uppercase; letter-spacing: .08em; color: var(--box-ink);
}
.infobox > :first-child, .warnbox > :first-child { margin-top: 0; }
.infobox > :last-child, .warnbox > :last-child { margin-bottom: 0; }
.warnbox p { margin: 3px 0; }
/* Bullets: small square tiles */
.infobox ul, .warnbox ul { list-style: none; padding-left: 0; margin: 0; }
.infobox li, .warnbox li { position: relative; margin: 7px 0; padding-left: 20px; }
.infobox li::before, .warnbox li::before {
	content: ""; position: absolute; left: 2px; top: .6em; width: 7px; height: 7px; border-radius: 1px; background: var(--box);
}
.warnbox strong { color: var(--box-ink); }
details.infobox > summary { cursor: pointer; list-style: none; }
details.infobox > summary::-webkit-details-marker { display: none; }
details.infobox > summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 400; }
details.infobox[open] > summary::after { content: "–"; }
details.infobox:not([open]) > summary { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.infobox code, .warnbox code { font-size: .86em; }

/* The header stays at the top on a full-width frosted strip, the same on
   hancocksit.com and svarslinjen.se; what scrolls up to it wraps up into
   it (ui.js) rather than sliding under. */
header.site {
	position: sticky; top: 0; z-index: 50;
	background: var(--bg); background: color-mix(in srgb, var(--bg) 86%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	/* the strip runs the full width; its contents keep to the page's width */
	max-width: none; padding-left: max(20px, calc((100% - 1000px) / 2)); padding-right: max(20px, calc((100% - 1000px) / 2));
}