:root {
	--bg: #111;
	--bg-soft: #1a1a1a;
	--line: #333;
	--hover: rgba(255, 255, 255, .035);
	--fg: orange;
	--fg-soft: #b7833a;
	--muted: #888;
	--ok: #6abf69;
	--warn: #e0a030;
	--err: #d9534f;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font: 15px/1.2 arial, sans-serif;
	background: var(--bg);
	color: var(--fg);
}

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

a:hover {
	color: #fff;
}

header.tool {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--line);
	background: var(--bg-soft);
}

header.tool h1 {
	margin: 0;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* the title sits right, the server tabs fill the row from the left */
header.tool h1 {
	margin-left: auto;
}

nav.servers {
	display: flex;
	gap: 2px;
	align-items: baseline;
}

nav.servers .server {
	padding: 6px 12px;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: 3px 3px 0 0;
	color: var(--fg-soft);
	white-space: nowrap;
}

nav.servers a.server:hover {
	background: var(--bg);
	border-color: var(--line);
	color: #fff;
}

/* this installation */
nav.servers .server.selected {
	background: var(--bg);
	border-color: var(--line);
	color: var(--fg);
	font-weight: bold;
}

/* a server the handshake cannot reach from here - the title says why */
nav.servers .server.dead {
	color: var(--muted);
	cursor: not-allowed;
}

/* the open session marker: click to close and return to the authorizing server */
nav.servers a.icon.close {
	margin-left: 6px;
	color: var(--muted);
	font-weight: normal;
	opacity: .8;
}

nav.servers a.icon.close:hover {
	color: var(--err);
	opacity: 1;
}

/* the icons in the two nav rows label their entry, they are not actions of
   their own - no fading, just a little air before the word */
nav.servers .server > .icon,
nav.panels a > .icon {
	margin-right: 6px;
	opacity: .7;
}

nav.panels a.selected > .icon {
	opacity: 1;
}

nav.panels .selected {
	color: var(--muted);
}

nav.panels .selected b {
	color: var(--fg);
}

/* the tool readout sits right in the panel row */
nav.panels span.selected {
	margin-left: auto;
	padding: 8px 14px;
	background: none;
	border: none;
}

nav.panels {
	display: flex;
	gap: 2px;
	padding: 0 16px;
	border-bottom: 1px solid var(--line);
	background: var(--bg-soft);
}

nav.panels a {
	padding: 8px 14px;
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: none;
	color: var(--fg-soft);
}

nav.panels a.selected {
	background: var(--bg);
	border-color: var(--line);
	color: var(--fg);
}

main {
	padding: 16px;
}

h2 {
	font-size: 14px;
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

h3 {
	font-size: 13px;
	margin: 24px 0 8px;
	color: var(--fg-soft);
}

/* messages float over the page instead of pushing it down */
.messages {
	position: fixed;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: min(420px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	overflow: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.messages li {
	padding: 6px 10px;
	margin-bottom: 4px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 3px solid var(--fg);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
	word-break: break-word;
}

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

table {
	border-collapse: collapse;
	margin-bottom: 16px;
}

th,
td {
	text-align: left;
	padding: 5px 10px 5px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	min-width: 130px;
}

th.wide,
td.wide {
	min-width: 350px;
}

/* an icon column keeps its icons on one line */
th.cell,
td.cell {
	white-space: nowrap;
	border-left: 1px solid var(--line);
	padding-left: 8px;
}


th {
	color: var(--muted);
	font-weight: normal;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .06em;
}

td.path,
td.file {
	font-family: consolas, monospace;
}

tr.inactive td {
	color: var(--muted);
}

/* the row under the pointer lifts a little out of the page - just enough to
   follow it across a wide matrix. Section heads are not rows you act on */
table tbody tr:not(.section):hover {
	background: var(--hover);
}

/* one table per search path would drift out of alignment - the paths are
   sections of a single table instead, each result set its own tbody */
table.search tbody+tbody th {
	padding-top: 22px;
}

/* action or navigation: a link carrying a target navigates and stays a
   plain link, everything else is an action and looks like a button. Icons
   are actions too, but they bring their own shape - see below. */
table a:not([target]):not(.icon) {
	display: inline-block;
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 0 5px;
	text-decoration: none;
	line-height: 17px;
	text-transform: uppercase;
	font-weight: normal;
	/* status cells are bold - the buttons in them are not */
	font-size: 11px;
	/* same as th */
}

table a:not([target]):not(.icon):hover {
	background: var(--line);
}

tr.create input[type=text] {
	width: 100%;
	padding: 1px 4px;
}

table.search tbody th:first-child {
	color: var(--fg-soft);
	text-transform: none;
	font-family: consolas, monospace;
	font-size: 12px;
}

/* -------------------------------------------------------------------------
   Icons — the glyphs come from css/icons.css, a rollout of tools/icons with
   the subsetted font inlined. Everything below is only shape and state.
   ------------------------------------------------------------------------- */

/* orange by default - only an icon that reports a status carries a colour of
   its own, and it gets that from the cell or span it sits in (.status.same,
   .status.older, …). That is what .state marks. */
.icon {
	width: 17px;
	font-size: 13px;
	vertical-align: -1px;
	color: var(--fg);
}

/* a status icon: it takes the colour of the cell or span it sits in and
   reads as a report, so it sits a notch above the actions around it */
.icon.state {
	color: inherit;
	opacity: .95;
}

/* in the two nav rows the icon labels its entry - it follows the row */
nav .icon {
	color: inherit;
}

/* an icon that links is an action. The row under the pointer does not change
   it: in a wide matrix everything would shift while the pointer travels, and
   an icon you are about to click should not have moved a moment earlier. The
   row itself says where you are (see the tr:hover background) */
a.icon {
	text-decoration: none;
	opacity: .8;
}

a.icon:hover,
a.icon:focus {
	opacity: 1;
	color: #fff;
}

/* the action exists, but nothing is asking for it right now. Still clickable,
   so pointing straight at it does light it up */
.icon.quiet {
	opacity: .18;
}

a.icon.quiet:hover {
	opacity: 1;
}

/* a state, not an action: the folder is wired up for every tool. Reads as
   'on' through full opacity, not through a colour of its own - the colours
   are reserved for the status icons */
.icon.on {
	opacity: 1;
}

button.icon {
	width: auto;
	padding: 1px 6px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: none;
	color: var(--fg);
	cursor: pointer;
}

button.icon:hover {
	background: var(--line);
	border-color: var(--fg);
}

/* the path column: label first, its actions trail behind it */
td.path .rowactions {
	margin-left: 8px;
	white-space: nowrap;
}

td.path button.icon {
	margin-left: 6px;
}

/* the column heads stay put while the sections scroll — that is what lets a
   section row be a single line instead of repeating the tool names */
table.matrix thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--bg);
	padding-bottom: 6px;
	box-shadow: inset 0 -1px 0 var(--line);
}

table.matrix thead a.name {
	color: var(--fg-soft);
	text-decoration: none;
}

table.matrix thead a.name:hover {
	color: #fff;
}

/* the tool has sources newer than its build - say so where its name is */
table.matrix thead th.stale a.name {
	color: var(--warn);
}

table.matrix thead .toolbar {
	display: block;
	margin-top: 3px;
}

/* a section is one line: the search path and how much it found */
table.matrix tr.section th {
	border-bottom-color: var(--fg-soft);
}

.status {
	font-weight: bold;
}

/* the status icon links to the file it describes - it keeps the colour of
   its cell instead of taking the plain link colour */
td.status a[target] {
	color: inherit;
}

td.status a[target]:hover {
	color: #fff;
}

th .status {
	font-weight: normal;
}

/* the modified marker follows the th style */
.muted {
	color: var(--muted);
}

.status.same {
	color: var(--ok);
}

.status.older {
	color: var(--warn);
}

.status.missing {
	color: var(--warn);
}

.status.newer {
	color: var(--err);
}

.status.unknown,
.status.unconfigured {
	color: var(--muted);
}

form.actions {
	margin: 0 0 16px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

form.inline {
	display: inline;
}

button,
input[type=submit] {
	font: inherit;
	color: var(--fg);
	background: var(--bg-soft);
	border: 1px solid var(--line);
	padding: 5px 12px;
	cursor: pointer;
}

button:hover {
	border-color: var(--fg);
}

button.link {
	border: none;
	background: none;
	padding: 2px 4px;
	text-decoration: underline;
}

button.danger:hover {
	border-color: var(--err);
	color: var(--err);
}

input[type=text],
input[type=number],
textarea,
select {
	font: inherit;
	font-family: consolas, monospace;
	color: var(--fg);
	background: var(--bg);
	border: 1px solid var(--line);
	padding: 5px 8px;
	width: 100%;
	max-width: 720px;
}

textarea {
	min-height: 110px;
}

fieldset {
	border: 1px solid var(--line);
	margin: 0 0 16px;
	padding: 12px 16px;
	max-width: 760px;
}

legend {
	color: var(--muted);
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: .06em;
}

label {
	display: block;
	margin-bottom: 12px;
}

label>span {
	display: block;
	color: var(--muted);
	margin-bottom: 4px;
}