/* Theme layer over bootstrap 3.3.7. Bootstrap still owns the grid, the collapsing navbar and
   the modals - everything below restyles what it paints so the page doesn't look like 2016.
   Loaded after bootstrap.min.css, so plain selectors are enough to win most of the time;
   where a rule mirrors a bootstrap selector exactly it is because bootstrap is that specific. */

:root {
	/* Surfaces and text */
	--bg: #f6f7f9;
	--surface: #ffffff;
	--surface-sunken: #f1f3f7;
	--border: #e4e7ec;
	--border-strong: #d3d8e0;
	--text: #1a1d24;
	--text-muted: #667085;

	/* Brand. The navy is the original #000049 lifted just enough to stop it reading as black */
	--nav-bg: #11163d;
	--nav-text: #c9cee8;
	--nav-text-active: #ffffff;
	--accent: #2f4bd8;
	--accent-hover: #253cb0;
	--accent-soft: #eef1fe;
	--danger: #c0392f;
	--danger-soft: #fdeceb;
	--warning: #a86404;
	--warning-soft: #fdf3e3;
	--success: #1f7a4d;
	--success-soft: #e9f7f0;

	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;

	--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
	--shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 16px -6px rgba(16, 24, 40, 0.12);
	--shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, 0.22);

	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

	/* Height of the fixed navbar, used again by body padding and the mobile menu height */
	--nav-height: 56px;
}

html {
	/* Stops mobile Safari inflating text when the phone is turned to landscape */
	-webkit-text-size-adjust: 100%;
	/* Tells the browser to use light form controls and scrollbars, so a dark-mode OS
	   doesn't hand us dark native widgets on a light page */
	color-scheme: light;
}

body {
	padding-top: var(--nav-height);
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Nothing dropped into a page (camera stills, images pasted into a note) should be
   able to push the layout wider than the screen */
img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--accent-hover);
	text-decoration: underline;
}

/* One visible focus treatment for everything, only for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.text-muted {
	color: var(--text-muted);
}

/* ---------- headings ---------- */

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--text);
}

#content h1 {
	font-size: 26px;
	line-height: 1.2;
	margin-bottom: 18px;
}

#content h2 {
	font-size: 19px;
	margin: 28px 0 12px;
}

#content h1 + h2 {
	margin-top: 0;
}

#content h3 {
	font-size: 15px;
	margin: 20px 0 6px;
	color: var(--text-muted);
	font-weight: 600;
}

/* Sidebar headings are labels rather than titles - small, spaced, quiet */
#sidebar h2 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 10px;
}

/* Spacing between sidebar sections lives here rather than in stray <br> tags, so a section
   that isn't rendered (ausgrid, when there are no outages) leaves no gap behind */
#sidebar h2:not(:first-child) {
	margin-top: 20px;
}

/* ---------- layout ---------- */

.main_row {
	margin-top: 24px;
	margin-bottom: 32px;
}

#content {
	padding: 24px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	/* Long unbroken strings (generated passwords, TXT records, URLs) wrap instead of
	   scrolling the whole page sideways */
	overflow-wrap: break-word;
	word-wrap: break-word;
}

#sidebar {
	padding: 20px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	/* Sits in a bootstrap column, so vertical margin only - a horizontal one would
	   narrow the column and break the grid */
	margin-bottom: 20px;
	font-size: 14px;
}

#sidebar > a > img {
	display: block;
	border-radius: var(--radius);
	border: 1px solid var(--border);
}

/* The two cards are the bootstrap columns themselves, and 25% + 75% leaves nothing in
   between, so they meet with their borders touching. Taking half a gutter off each width
   and handing it back as a margin opens a gap without the row adding up to over 100%.
   Below this the columns stack and the phone block spaces them instead. */
@media (min-width: 768px) {
	#sidebar {
		width: calc(25% - 12px);
	}

	#content {
		width: calc(75% - 12px);
		margin-left: 24px;
	}
}

/* ---------- navbar ---------- */

.navbar {
	background-color: var(--nav-bg);
	border-color: transparent;
	border-width: 0;
	border-radius: 0;
	box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08), 0 1px 12px rgba(16, 24, 40, 0.14);
	min-height: var(--nav-height);
	margin-bottom: 0;
}

.navbar-inverse {
	background-color: var(--nav-bg);
	border-color: transparent;
}

.navbar-header {
	min-height: var(--nav-height);
}

.navbar-inverse .navbar-brand {
	color: #ffffff;
	font-size: 16px;
	font-weight: 650;
	letter-spacing: -0.01em;
	/* 18 + 20 line-height + 18 = the 56px navbar */
	padding: 18px 15px;
	height: auto;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
	color: #ffffff;
	text-decoration: none;
}

.navbar-inverse .navbar-nav > li > a {
	color: var(--nav-text);
	font-size: 14px;
	font-weight: 550;
	padding: 18px 14px;
	border-radius: 0;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
	color: var(--nav-text-active);
	background-color: rgba(255, 255, 255, 0.08);
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
	color: var(--nav-text-active);
	background-color: rgba(255, 255, 255, 0.12);
}

/* Bootstrap's toggle is a bordered box with a 4px radius; this is a plain tappable icon */
.navbar-inverse .navbar-toggle {
	border: 0;
	border-radius: var(--radius-sm);
	margin: 11px 15px 11px 0;
	padding: 9px 10px;
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
	background-color: rgba(255, 255, 255, 0.12);
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #ffffff;
	height: 2px;
	border-radius: 2px;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border-color: rgba(255, 255, 255, 0.12);
}

/* ---------- dropdowns ---------- */

.dropdown-menu {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	padding: 6px;
	margin-top: 4px;
	min-width: 200px;
	font-size: 14px;
}

.dropdown-menu > li > a {
	color: var(--text);
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	transition: background-color 0.12s ease, color 0.12s ease;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--accent-soft);
	color: var(--accent-hover);
	text-decoration: none;
}

.dropdown-menu .divider {
	background-color: var(--border);
	margin: 6px 0;
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: 2px;
	border-radius: var(--radius);
}

/* Only open submenus on hover where hovering is actually possible. On a touch screen
   the tap handler in index.php sets .open instead */
@media (hover: hover) {
	.dropdown-submenu:hover > .dropdown-menu {
		display: block;
	}

	.dropdown-submenu:hover > a:after {
		border-left-color: var(--accent-hover);
	}
}

.dropdown-submenu.open > .dropdown-menu {
	display: block;
}

/* The "has children" arrow. Drawn with borders so it needs no icon font or image */
.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: var(--text-muted);
	margin-top: 6px;
	margin-right: -4px;
}

.dropdown-submenu.pull-left {
	float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
	left: -100%;
	margin-left: 10px;
	border-radius: var(--radius);
}

/* ---------- sidebar: weather, tides, ausgrid ---------- */

/* The forecast markup comes out of the cache table, so this styles bootstrap-era HTML
   (div > img > br > b) that can't be changed from here */
.forecast_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
	gap: 10px;
	margin-bottom: 16px;
}

.forecast_wrapper {
	text-align: center;
	font-size: 12px;
	line-height: 1.45;
	color: var(--text-muted);
	padding: 12px 8px;
	background-color: var(--surface-sunken);
	border-radius: var(--radius);
	/* min-height rather than height so a long precis grows the tile instead of being clipped */
	min-height: 132px;
}

.forecast_wrapper img {
	width: 44px;
	margin-bottom: 2px;
}

.forecast_wrapper b {
	color: var(--text);
	font-weight: 650;
}

.tide_wrapper {
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.8;
	margin: 14px 0 4px;
	padding: 12px;
	background-color: var(--surface-sunken);
	border-radius: var(--radius);
}

.tide_wrapper b {
	color: var(--text);
	font-weight: 650;
}

/* Outage readings are plain text separated by <br>, so the block itself carries the alarm */
#sidebar .ausgrid_wrapper {
	font-size: 13px;
	padding: 12px;
	border-radius: var(--radius);
	background-color: var(--danger-soft);
	color: var(--danger);
}

/* ---------- news list ---------- */

/* One row per story: icon, wrapping title, and the mark-as-read button pushed to the far
   right so it isn't sitting in the middle of the link you were aiming for */
.story {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 10px;
	margin: 0 -10px;
	border-radius: var(--radius-sm);
	border-bottom: 1px solid var(--border);
	transition: background-color 0.12s ease;
}

.story:last-child {
	border-bottom: 0;
}

@media (hover: hover) {
	.story:hover {
		background-color: var(--surface-sunken);
		border-bottom-color: transparent;
	}
}

/* Faded while the mark-as-read request is in flight, so a slow connection still looks like
   something happened */
.story_deleting {
	opacity: 0.4;
}

.story_icon {
	flex: none;
	width: 16px;
	height: 16px;
	object-fit: contain;
	margin-top: 0.25em;
	border-radius: 3px;
}

.story_link {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--text);
	font-size: 15px;
}

.story_link:hover {
	color: var(--accent);
	text-decoration: none;
}

/* Sits first in the row, as it does today. A circular hit area rather than a bare glyph so
   there is something to aim at on a phone */
.story_delete {
	flex: none;
	width: 26px;
	height: 26px;
	line-height: 24px;
	text-align: center;
	border-radius: 50%;
	color: var(--text-muted);
	font-size: 16px;
	text-decoration: none;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.story_delete:hover,
.story_delete:focus {
	background-color: var(--danger-soft);
	color: var(--danger);
	text-decoration: none;
}

#stories_empty {
	padding: 32px 0;
	text-align: center;
	color: var(--text-muted);
}

/* ---------- todo ---------- */

.task {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
}

.task:last-child {
	border-bottom: 0;
}

.task_icon {
	flex: none;
	width: 16px;
	height: 16px;
	object-fit: contain;
	border-radius: 3px;
}

.task a {
	color: var(--text);
}

.task a:hover {
	color: var(--accent);
	text-decoration: none;
}

/* ---------- cameras ---------- */

/* Auto-fitting tracks rather than fixed halves, so the stills reflow with the column
   instead of at one hardcoded breakpoint. The min track is wide enough that the content
   column only ever splits two ways - at 260px the stills were down to a third of the width
   and too small to make anything out. min() keeps it from overflowing a narrow phone,
   where a 380px track would be wider than the screen. */
.camera_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 14px;
}

/* The cameras don't agree on an aspect ratio - the doorbells are tall, the rest are 16:9 -
   so the tile fixes the shape and the still is cropped to fill it. Every row lines up and
   the grid stops looking like a ransom note. */
.camera_item {
	overflow: hidden;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background-color: var(--surface-sunken);
	line-height: 0;
	aspect-ratio: 16 / 9;
}

.camera_item a {
	display: block;
	height: 100%;
}

.camera_item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (hover: hover) {
	.camera_item:hover img {
		transform: scale(1.02);
		opacity: 0.95;
	}
}

/* ---------- tools ---------- */

.password_list {
	font-family: var(--font-mono);
	font-size: 13px;
	word-break: break-all;
	line-height: 1.9;
	margin-bottom: 12px;
	padding: 12px 14px;
	background-color: var(--surface-sunken);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.dns_form {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.dns_form input {
	/* 16px keeps iOS from zooming the page in when the field takes focus */
	font-size: 16px;
	padding: 9px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--surface);
	color: var(--text);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dns_form input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}

.dns_form input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}

.dns_form input[type="submit"] {
	flex: none;
	padding: 9px 18px;
	font-weight: 600;
	background-color: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
	cursor: pointer;
}

.dns_form input[type="submit"]:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* ---------- notes ---------- */

#note_title {
	display: block;
	width: 100%;
	font-size: 22px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--text);
	padding: 10px 12px;
	margin-bottom: 16px;
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#note_title:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}

#editor {
	min-height: 320px;
}

/* Quill's snow theme ships its own greys and square corners - pull it onto the tokens */
.ql-toolbar.ql-snow {
	border-color: var(--border-strong);
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	background-color: var(--surface-sunken);
}

.ql-container.ql-snow {
	border-color: var(--border-strong);
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	background-color: var(--surface);
}

.ql-editor, .ql-container {
	font-size: 16px;
	font-family: var(--font);
}

.note_buttons {
	display: flex;
	gap: 10px;
	max-width: 420px;
	margin-top: 16px;
}

.note_button {
	flex: 1 1 auto;
	padding: 12px 16px;
	font-weight: 600;
	font-size: 15px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#note_save {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
}

#note_save:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* Destructive, so outlined until you're actually on it */
#note_delete {
	background-color: var(--surface);
	border-color: var(--border-strong);
	color: var(--danger);
}

#note_delete:hover {
	background-color: var(--danger-soft);
	border-color: var(--danger);
}

/* ---------- bookmarks ---------- */

/* Title, url and category stack on a phone and sit on one line from tablet up, which is
   handled by the wrap plus the flex-basis on the fields below */
#bookmark_form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
	margin-bottom: 8px;
	background-color: var(--surface-sunken);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

#bookmark_form input[type="text"] {
	/* 16px keeps iOS from zooming the page in when the field takes focus */
	font-size: 16px;
	flex: 1 1 180px;
	min-width: 0;
	padding: 9px 12px;
	background-color: var(--surface);
	color: var(--text);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#bookmark_form input[type="text"]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	outline: none;
}

.bookmark_form_buttons {
	display: flex;
	gap: 8px;
	flex: none;
}

.bookmark_form_buttons input {
	padding: 9px 18px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#bookmark_save {
	background-color: var(--accent);
	border-color: var(--accent);
	color: #ffffff;
}

#bookmark_save:hover {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

#bookmark_cancel {
	background-color: var(--surface);
	border-color: var(--border-strong);
	color: var(--text);
}

#bookmark_cancel:hover {
	background-color: var(--surface-sunken);
}

.bookmark {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	margin: 0 -10px;
	border-radius: var(--radius-sm);
	border-bottom: 1px solid var(--border);
	transition: background-color 0.12s ease;
}

.bookmark:last-child {
	border-bottom: 0;
}

@media (hover: hover) {
	.bookmark:hover {
		background-color: var(--surface-sunken);
		border-bottom-color: transparent;
	}
}

/* The row the form is currently loaded from, so it is obvious what Save changes will hit */
.bookmark_editing,
.bookmark_editing:hover {
	background-color: var(--accent-soft);
	border-bottom-color: transparent;
}

/* Title over url. min-width:0 is what lets a long url shrink and ellipsis rather than
   pushing the buttons off the side */
.bookmark_details {
	flex: 1 1 auto;
	min-width: 0;
}

.bookmark_title {
	display: block;
	color: var(--text);
	font-size: 15px;
	font-weight: 550;
}

.bookmark_title:hover {
	color: var(--accent);
	text-decoration: none;
}

.bookmark_url {
	display: block;
	font-size: 12px;
	color: var(--text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bookmark_edit {
	flex: none;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.bookmark_edit:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Same circular target as the mark-as-read button on the news list */
.bookmark_delete {
	flex: none;
	width: 26px;
	height: 26px;
	padding: 0;
	line-height: 1;
	text-align: center;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--text-muted);
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
}

.bookmark_delete:hover,
.bookmark_delete:focus {
	background-color: var(--danger-soft);
	color: var(--danger);
}

#bookmarks_empty {
	padding: 32px 0;
	text-align: center;
	color: var(--text-muted);
}

/* ---------- login ---------- */

#login {
	margin-top: 8vh;
	padding: 28px;
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
}

#login h1 {
	font-size: 22px;
	margin-bottom: 4px;
}

/* ---------- bootstrap components: forms, buttons, alerts, modals ---------- */

.form-control {
	height: auto;
	padding: 10px 12px;
	font-size: 15px;
	color: var(--text);
	background-color: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn {
	padding: 10px 16px;
	font-size: 15px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
	box-shadow: none;
	text-shadow: none;
	background-image: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:focus,
.btn:active:focus {
	outline: none;
}

.btn-primary {
	background-color: var(--accent);
	border-color: var(--accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

.btn-default {
	background-color: var(--surface);
	border-color: var(--border-strong);
	color: var(--text);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	background-color: var(--surface-sunken);
	border-color: var(--border-strong);
	color: var(--text);
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
	background-color: var(--danger);
	border-color: var(--danger);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
	background-color: var(--warning);
	border-color: var(--warning);
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
	background-color: var(--success);
	border-color: var(--success);
}

.alert {
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	border: 1px solid transparent;
}

.alert-danger {
	background-color: var(--danger-soft);
	border-color: rgba(192, 57, 47, 0.25);
	color: var(--danger);
}

.modal-content {
	border: 0;
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
}

.modal-header {
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
}

.modal-title {
	font-size: 17px;
	font-weight: 650;
}

.modal-body {
	padding: 20px;
}

.modal-footer {
	padding: 14px 20px;
	border-top: 1px solid var(--border);
}

.modal-backdrop.in {
	opacity: 0.4;
}

.close {
	font-size: 22px;
	font-weight: 400;
	text-shadow: none;
	opacity: 0.5;
}

.close:hover,
.close:focus {
	opacity: 0.9;
}

/* The alert modals in index.php ask for these; bootstrap 3 has no coloured header variants */
.modal-header-danger {
	background-color: var(--danger-soft);
	border-bottom-color: rgba(192, 57, 47, 0.2);
	border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header-danger .modal-title {
	color: var(--danger);
}

.modal-header-warning {
	background-color: var(--warning-soft);
	border-bottom-color: rgba(168, 100, 4, 0.2);
	border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header-warning .modal-title {
	color: var(--warning);
}

.modal-header-success {
	background-color: var(--success-soft);
	border-bottom-color: rgba(31, 122, 77, 0.2);
	border-radius: var(--radius) var(--radius) 0 0;
}

.modal-header-success .modal-title {
	color: var(--success);
}

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

@media (max-width: 767px) {
	/* The sidebar used to be display:none below 750px, which put the weather, tides and
	   ausgrid readings out of reach on a phone. It now sits under the page content instead */
	.main_row {
		display: flex;
		flex-direction: column;
		margin-top: 12px;
	}

	#content {
		order: 1;
		padding: 18px 16px;
	}

	#sidebar {
		order: 2;
		padding: 18px 16px;
		margin-top: 16px;
	}

	#content h1 {
		font-size: 22px;
	}

	.forecast_wrapper {
		font-size: 13px;
	}

	/* The collapsed menu can use the whole screen rather than bootstrap's 340px */
	.navbar-fixed-top .navbar-collapse {
		max-height: calc(100vh - var(--nav-height));
	}

	/* Roughly 44px tall targets throughout the collapsed menu */
	.navbar-inverse .navbar-nav > li > a {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.navbar-nav .open .dropdown-menu > li > a,
	.navbar-nav .open .dropdown-menu .dropdown-header {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	/* Long note and link titles wrap instead of overflowing off the side */
	.navbar-nav .open .dropdown-menu > li > a {
		white-space: normal;
		color: var(--nav-text);
	}

	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
	.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
		color: var(--nav-text-active);
		background-color: rgba(255, 255, 255, 0.08);
	}

	/* Submenus stack inline and indented. Left at 100% they would open off screen */
	.navbar-nav .dropdown-submenu > .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin: 0;
		padding: 0;
		border: 0;
		box-shadow: none;
		background-color: transparent;
		border-radius: 0;
	}

	.navbar-nav .dropdown-submenu .dropdown-menu > li > a {
		padding-left: 40px;
	}

	/* Caret points down, matching the way the submenu now expands */
	.navbar-nav .dropdown-submenu > a:after {
		border-width: 5px 5px 0 5px;
		border-left-color: transparent;
		border-top-color: var(--nav-text);
		margin-top: 8px;
		margin-right: 0;
	}

	.story {
		padding: 12px 10px;
	}

	.story_delete {
		width: 34px;
		height: 34px;
		line-height: 32px;
		font-size: 18px;
	}

	.task {
		padding: 12px 0;
	}

	.dns_form {
		flex-direction: column;
	}

	.dns_form input {
		width: 100%;
	}

	.form-control, input[type="password"], textarea {
		font-size: 16px;
	}

	#note_title {
		font-size: 19px;
	}

	/* Every field on its own line, and the buttons spread across the bottom of the form */
	#bookmark_form input[type="text"] {
		flex: 1 1 100%;
	}

	.bookmark_form_buttons {
		flex: 1 1 100%;
	}

	.bookmark_form_buttons input {
		flex: 1 1 auto;
	}

	.bookmark {
		padding: 12px 10px;
	}

	.bookmark_delete {
		width: 34px;
		height: 34px;
		font-size: 18px;
	}

	#editor {
		min-height: 50vh;
	}

	#note_save {
		flex: 2 1 auto;
	}

	#note_delete {
		flex: 1 1 auto;
	}

	#login {
		margin-top: 24px;
	}
}