body {
	display: flex;
	flex-direction: column;
	background: var(--ButtonFace);
	background-image: url('../assets/tiles/starz.jpg');
	color: var(--ButtonText);
	font-family: sans-serif;
	font-size: 10pt;
	align-items: center;
	justify-content: center;

	/* Kills iOS double-tap-to-zoom, which fires on every toolbar button pressed
	   twice in a row and leaves the shell magnified and off-centre.
	   `user-scalable=no` in the viewport meta used to be how you asked for this;
	   iOS has ignored it since 10 and Chrome ignores it too, both on accessibility
	   grounds, so it was removed as dead weight. This is the supported spelling,
	   and it is honoured precisely because it is narrower: pinch-zoom still works.

	   The property is not inherited, but it does not need to be -- allowed gestures
	   are the intersection of this element's value and its ancestors', so declaring
	   it here covers the whole tree. The stricter `touch-action: none` on the drag
	   handles still wins for touches that start on them, and dragging is unaffected.

	   Does not reach into #frame: touch-action does not cross a document boundary,
	   so double-tap zoom stays alive on the archived pages, which is where it is
	   actually wanted -- they are 800x600 layouts being read on a phone. */
	touch-action: manipulation;

	--ActiveTitle: rgb(0, 65, 10);
	--GradientActiveTitle: rgb(12, 145, 18);
}

.toolbars {
	display: flex;
	flex-direction: column;
	padding: 1px;
	margin-top: 1px;
	margin-bottom: 5px;
	border: 1px solid var(--ButtonShadow);
	box-shadow: 0 1px 0 var(--ButtonHilight), 0 1px 0 var(--ButtonHilight) inset;
}

.toolbar {
	display: flex;
	flex-direction: row;
	align-items: center;
	/* border: 1px solid var(--ButtonShadow); */
	/* margin: 2px; */
	overflow: hidden;
	position: relative;
}

.toolbar-drag-handle {
	flex: 0 0 auto;
	width: 10px;
	box-sizing: border-box;
	align-self: stretch;
	/* height: 100%; doesn't work in Firefox https://stackoverflow.com/questions/51877276/height-100-not-working-with-flex-box */
	position: relative;
	touch-action: none;
}

.toolbar-drag-handle::before {
	content: "";
	display: block;
	position: absolute;
	left: 2px;
	top: 2px;
	width: 4px;
	bottom: 1px;
	box-sizing: border-box;

	/* copied from .outset-shallow class (CSS is bad at composition) */
	border: 1px solid;
	border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128) rgb(255, 255, 255);
	border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow) var(--ButtonHilight);
}

.toolbar+.toolbar {
	border-top: 1px solid var(--ButtonHilight);
	box-shadow: 0px -1px 0px var(--ButtonShadow);
	margin-top: 2px;
}

.toolbar-overflow-menu-button {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 12px;
	display: flex;
	font-size: 12pt;
	text-align: center;
	padding: 0;
	overflow: hidden;
}

.toolbar-overflow-menu {
	display: flex;
	flex-direction: row;
}

.toolbar hr[aria-orientation="vertical"] {
	display: block;
	width: 0px;
	height: 36px;
	/* height: 100%; is not working (would do calc(100% - something) if it did) */
	margin: 0;
	border: 0;
	border-left: 1px solid var(--ButtonShadow);
	border-right: 1px solid var(--ButtonHilight);
	margin-left: 2px;
	margin-right: 2px;
}

#address-bar,
#standard-buttons,
#internet-buttons,
.menus {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	align-items: center;
}

#address-bar {
	flex: 1;
}

#address-compound-input {
	background: var(--Window);
	color: var(--WindowText);
	flex: 1;
	display: flex;
	margin-top: 1px;
	margin-bottom: 1px;
}

#address-icon {
	display: inline-block;
	margin-right: 4px;
	margin-left: 1px;
	align-self: center;
}

#address-input {
	flex: 1;
	background: transparent;
	color: inherit;
	border: 0;
	outline: 0;
	padding: 0;
	min-width: 0;
	width: 0;
	/* this is weird to have to write; but this is needed to prevent minimum width and thus overflow */
}

#address-dropdown-button {
	width: 17px;
	height: 19px;
	padding: 0;
}

label[for="address"] {
	margin-right: 5px;
}

button {
	padding: 5px;
}

.toolbar-button {
	width: 54px;
	height: 40px;
	box-sizing: border-box;
	padding: 0;
	font-size: 12px;
	line-height: 12px;
}

.toolbar-button .label-text {
	margin-top: 24px;
}

.toolbar-compound-button-wrapper {
	display: flex;
	flex-direction: row;
}

.toolbar-dropdown-button {
	padding: 0;
	width: 16px;
	line-height: 30px;
	height: 40px;
}

.toolbar-compound-button-wrapper:hover:not(:active) button.lightweight:enabled {
	/* border: var(--outset-shallow); */
	/* @TODO: DRY with os-gui library, maybe by using JS */
	border-style: solid;
	border-width: 1px;
	border-color: var(--ButtonHilight) var(--ButtonShadow) var(--ButtonShadow) var(--ButtonHilight);
}

.toolbar-compound-button-wrapper .toolbar-button:enabled:hover:active~button.lightweight {
	border-style: solid;
	border-width: 1px;
	border-color: var(--ButtonShadow) var(--ButtonHilight) var(--ButtonHilight) var(--ButtonShadow);
}

.hiding-label-text .label-text {
	display: none;
}

.hiding-label-text .toolbar-button {
	width: 27px;
	height: 26px;
	/* @TODO: icon alignment */
}

.hiding-label-text .toolbar-dropdown-button {
	height: 26px;
	width: 13px;
	line-height: 24px;
	/* for SVG alignment */
}

.hiding-label-text .toolbar-dropdown-button svg {
	width: 12px;
	height: 12px;
}

.toolbar hr[aria-orientation="vertical"] {
	height: 22px;
}

.toolbar-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.toolbar-button .icon {
	width: 20px;
	height: 20px;
	position: absolute;
	top: 2px;
	/* The sprite is 20px-per-cell pixel art. At 1:1 this changes nothing, but on a
	   high-DPI display the browser scales the bitmap up and smooths it by default,
	   which turns hard 1998 edges into mush. */
	image-rendering: pixelated;
}

.toolbar-button .icon {
	background-image: url("../assets/images/browse-ui-icons-grayscale.png");
}

.toolbar-button:enabled:hover .icon,
.toolbar-compound-button-wrapper:hover .toolbar-button:enabled .icon {
	background-image: url("../assets/images/browse-ui-icons.png");
}

.toolbar-button:disabled .icon,
#address-dropdown-button:disabled svg,
.toolbar-dropdown-button:disabled svg {
	filter: saturate(0%) opacity(50%);
	/* fallback */
	filter: url("#disabled-inset-filter");
}

#status-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 2px;
	gap: 2px;
	height: 18px;
}

#status-bar>* {
	height: 16px;
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

#status-bar-left {
	width: 250px;
	/* estimated */
}

#status-bar-middle {
	flex: 1;
}

#status-bar-right {
	flex-basis: fit-content;
	/* estimated */
	display: flex;
	gap: 0px;
}

#status-bar-simple {
	display: flex;
	flex-direction: row;
	gap: 5px;
}

#content {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--Window);
	color: var(--WindowText);
	min-width: 0;
	min-height: 0;
}

#content iframe {
	flex: 1;
	min-width: 0;
	min-height: 0;
	border: 0;
}

/* code modifications */

@font-face {
	font-family: "Pixelated MS Sans Serif";
	font-style: normal;
	font-weight: 400;
	src: url("../assets/fonts/ms_sans_serif.woff2") format("woff2");
}

#menu-bar-toolbar {
	display: none;
}

#standard-buttons-toolbar {
	border-top: 0px solid var(--ButtonHilight);
	box-shadow: 0px 0px 0px var(--ButtonShadow);
	margin-top: 2px;
}

.toolbars,
.toolbar-button,
#status-bar {
	font-family: "Pixelated MS Sans Serif";
	-webkit-font-smoothing: none;
}

#address-input {
	-webkit-font-smoothing: auto;

}

.window-container {
	display: flex;
	flex-direction: column;
	background: var(--ButtonFace);
	color: var(--ButtonText);
	font-family: sans-serif;
	font-size: 10pt;
	height: calc(100% - 6px);
	max-height: 750px;
	width: calc(100% - 6px);
	max-width: 900px;
}

.os-window .window-title {
	/* font-family: "Pixelated MS Sans Serif";
	-webkit-font-smoothing: none; */
	left: 3px;
	top: 1px;
}

.os-window .window-titlebar,
body>.window-titlebar {
	/* background: rgb(0, 0, 128); */
	/* background: var(--ActiveTitle); */
	/* background: linear-gradient(to right, rgb(0, 0, 128) 0%, rgb(16, 132, 208) 100%); */
	background: linear-gradient(to right, var(--ActiveTitle) 0%, var(--GradientActiveTitle) 100%);
	color: rgb(255, 255, 255);
	color: var(--TitleText);

	background-image:
}

.hidden {
	display: none;
}

button:not(.lightweight):focus::before {
	border: 0px;
}

#address-dropdown {
	position: absolute;
}

.address-container {
	display: flex;
	width: -webkit-fill-available;
	flex-direction: column;
}

#dropdown {
	position: fixed;
	width: -webkit-fill-available;
	max-width: 830px;
	background: var(--Window);
	color: var(--WindowText);
	/* flex: 1; */
	/* display: flex; */
	margin-top: 22px;
	margin-bottom: 1px;
	z-index: 1;
	margin-right: 5px;
	height: 500px;
	max-height: calc(100vh - 140px);
}

#favorite-star {
	color: var(--GradientActiveTitle);
	margin-top: 1px;
	margin-right: 2px;
	margin-left: 1px;
	align-self: center;
	font-style: bold;
	-webkit-font-smoothing: auto;
	margin: 0px 2px;
}

#favorite-star::before {
	content: "☆";
}

#favorite-star:hover::before {
	content: "★";
}

#favorite-star.toggled::before {
	content: "★";
}

#favorite-star.toggled:hover::before {
	content: "★";
}

#favorite-star:enabled {
	margin-top: 1px;
	margin-right: 2px;
	margin-left: 1px;
	align-self: center;
	font-style: bold;
	-webkit-font-smoothing: auto;
}

#favorite-star:hover {
	cursor: pointer;
}

#address::before {
	content: "https:";
}

.dropdown-content {
	height: 100%;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
}

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button {
	zoom: 1.3;
}

.favorites,
.history {
	width: 300px;
	height: 100%;
	position: fixed;
	background-color: silver;
	z-index: 1000000;
	top: 100px;
	height: calc(100% - 122px);
	box-shadow: 0px 0px 0 rgb(255, 255, 255) inset, -1px 0px 0 rgb(128, 128, 128) inset;

	resize: horizontal;
	/* hidden, not auto: the scroll belongs to the list inside the white box, not to the
	   panel. When the panel scrolled, a long list slid up out of the white and carried on
	   over the silver. `resize` still works -- it only needs overflow to be something
	   other than visible. */
	overflow: hidden;

	max-width: 900px;
	min-width: 250px;
}

.favorites-list,
.history-list {
	width: calc(100% - 8px);
	height: calc(100% - 6px);
	background-color: white;
	position: absolute;
	display: flex;
	margin: 0px 0px 10px 0px;
	flex-direction: column;
	/* The white box is the boundary. Anything longer than it scrolls within it rather
	   than drawing outside it. */
	overflow: hidden;
}

.favorites-toolbar.toolbars,
.history-toolbar.toolbars {
	background-color: silver;
	top: -2px;
	width: -webkit-fill-available;
	background-color: silver;
	padding: 3px 2px 3px 5px;
	display: flex;
	flex-direction: row;
	margin: 0px;
}

.favorites-toolbar.toolbars::before {
	content: url('../assets/icons/directory_closed-1.png');
	position: relative;
	bottom: -2px;
	padding-right: 2px;
}

.favorites-entries,
.history-entries {
	/* Takes the space the toolbar leaves and no more. min-height: 0 is the part that
	   makes it work: a flex child defaults to min-height: auto, which refuses to shrink
	   below its content, so the list grew to its full length and pushed itself out of the
	   white box instead of scrolling inside it. */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	/* Block, not a flex column. As flex items the rows inherited flex-shrink: 1 and were
	   compressed to fit rather than overflowing -- 90 favorites squeezed each row from
	   21px to 6px, so the list never scrolled because it never needed to. Stacking them
	   as blocks keeps every row its own height and lets the overflow above do its job. */
}

.bookmark-list-entry {
	padding: 1px 5px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* .current is the page the frame is showing. It gets the hover treatment and keeps it, so
   the panel answers "which of these am I looking at" without needing a pointer on it. */
.bookmark-list-entry:hover,
.bookmark-list-entry:focus-visible,
.bookmark-list-entry.current {
	/* text-overflow: ellipsis;
	overflow: ; */
	white-space: inherit;
	padding: 0px 5px 4px 5px;
}

.bookmark-list-entry::before {
	content: url('../assets/icons/page-16x16.png');
	position: relative;
	bottom: -2px;
	padding-right: 2px;
}

.bookmark-list-entry:hover,
.bookmark-list-entry:focus-visible,
.bookmark-list-entry.current {
	background-color: var(--ActiveTitle);
	color: white;
	cursor: pointer;
	text-decoration: underline;
}

/* Focus and current look the same otherwise, so the focused row carries the dotted rect
   Windows put on whatever the keyboard was pointing at. */
.bookmark-list-entry:focus-visible {
	outline: 1px dotted white;
	outline-offset: -2px;
}

/* A day's worth of visits. The calendar stands in for the folder a Favorites entry gets,
   so the two panels read as the same kind of tree with different contents. */
.history-day {
	padding: 1px 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	user-select: none;
}

.history-day::before {
	content: url('../assets/icons/calendar-5.png');
	position: relative;
	bottom: -2px;
	padding-right: 2px;
}

/* The twisty, ahead of the calendar: a collapsed day points right, an open one points
   down, which is the one part of the row that says it can be opened at all. */
.history-day .twisty {
	display: inline-block;
	width: 9px;
	font-size: 9px;
	line-height: 9px;
	text-align: center;
}

.history-day:hover,
.history-day:focus-visible {
	background-color: var(--ActiveTitle);
	color: white;
	text-decoration: underline;
}

.history-day:focus-visible {
	outline: 1px dotted white;
	outline-offset: -2px;
}

.history-day-pages.collapsed {
	display: none;
}

/* Indented under their day, far enough to clear the calendar rather than by a round
   number, so the page icons line up with the day label's text. */
.history-entries .bookmark-list-entry {
	padding-left: 22px;
}

.history-entries .bookmark-list-entry:hover,
.history-entries .bookmark-list-entry:focus-visible,
.history-entries .bookmark-list-entry.current {
	padding-left: 22px;
}

.history-empty {
	padding: 4px 6px;
	color: var(--GrayText, gray);
}

mark.exact {
	background: #fffb00;
	color: #000;
}

mark.fuzzy {
	background: #fffb00;
	color: #000;
}

li {
	font-family: Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: auto;
	padding-bottom: 1px;
}

li:hover {
	color: white;
	background-color: var(--ActiveTitle);
	cursor: pointer;
}

li:before {
	content: url('../assets/icons/page-16x16.png');
	padding: 0px 5px 0px 1px;	
}

#status-bar {
	display: none;
}

/* .toolbar-button {
	font-family: "Pixelated MS Sans Serif" !important;

} */
/* --- phones ---------------------------------------------------------------

   The desktop metaphor is the point of this shell, but on a 480px screen most
   of it is a tax on the thing you actually came for: the archived page. */

@media (max-width: 480px) {

	/* Everything is sized for a mouse: 40px buttons, 16px icons, 11px chrome.
	   Zooming the body scales the whole shell at once -- toolbars, panels, status
	   bar, the lot -- rather than retuning a dozen rules that were drawn to fit
	   each other. The iframe's contents zoom with it, which is the point: these
	   are 800x600 pages being read on a 375px screen.

	   Every length below is in the zoomed coordinate space, so they read the same
	   as the desktop rules they override. The media query is not: it tests the
	   real viewport, so 480px still means 480 actual pixels. */
	body {
		zoom: 1.25;
	}

	/* Full height. The 3px gutter that gives the window its drop shadow and the
	   750px cap both exist to make it read as a window sitting on a desktop --
	   worth it at 900px wide, not worth the rows of page it costs on a phone. */
	.window-container {
		height: 100%;
		max-height: none;
	}

	/* Five buttons: Home, Favorites, History, Random, Share.
	   Back and Forward duplicate gestures and a hardware button the phone
	   already has. Source and Print are desk work -- opening the Wayback
	   original, putting it on paper -- and neither is what a phone is being
	   held up for. History stays: reading back through the day is as much a
	   phone thing as a desk thing.
	   The dividers go with them: they separate groups that no longer exist. */
	#internet-buttons .toolbar-compound-button-wrapper,
	#internet-buttons #source,
	#internet-buttons .print-button,
	#internet-buttons hr {
		display: none;
	}

	/* The input already says what it is -- it is full of the URL. "Address" is
	   a word from a screen with room to spare, and here it costs the field the
	   width its longest paths need. */
	label[for="address"] {
		display: none;
	}

	/* Full width, matching the window rather than the viewport: the container
	   keeps a 3px gutter on each side even here, and a panel spanning the whole
	   screen would sit on top of the window's own border. Fixed positioning
	   resolves this percentage against the viewport, so the arithmetic is the
	   same one .window-container uses, and the left edge is already the window's.

	   The 300px default is a sidebar next to the page. There is no next-to on a
	   phone -- 300px of a 375px screen leaves a sliver of iframe that is neither
	   readable nor worth keeping -- so the panel takes the window and the exit
	   button in its header is how you get back.

	   Down to the bottom of the page, too. The desktop's 122px leaves the last
	   22 to the status bar, which is the right trade when the panel is a 300px
	   sidebar and the status bar is still telling you about the page beside it.
	   At full width there is no page beside it, and those 22px are the difference
	   between the last entry being reachable and being cut in half. 100px is the
	   toolbars above, unchanged.

	   No resize handle: it can only shrink from here, it lands under the list,
	   and there is no mouse to drag it with. */
	.favorites,
	.history {
		width: calc(100% - 6px);
		height: calc(100% - 100px);
		resize: none;
	}
}