/* The look of rummeyer.com — greys, one panel, dotted rules — in one monospaced font. */


:root {
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
  --headline: #1a1a1a;
  --ink: #2e2e2e;
  --muted: #6e6e6e;
  --rule: #c2c2c2;
  --accent: #a0a0a0;
  --bg: #ececeb;
  --panel: #fbfbfa;
  --panel-edge: #dedddb;
  --cell: #f1f1ef;
  --ok: #3f7d4e;
  --bad: #a3432f;
  --away: #e4ece6;
  --blocked: #efe7e2;
  /* One colour per client, in the order of the client list: its days in the calendar. */
  --c1: #dcebf8; --c1-edge: #6d9cc7;
  --c2: #e0eee3; --c2-edge: #6a9b76;
  --c3: #f4ead3; --c3-edge: #b8984f;
  --c4: #ebe4f6; --c4-edge: #8e79b8;
  --c5: #f7e1df; --c5-edge: #c27d78;
  --c6: #d8efed; --c6-edge: #5aa39e;
  color-scheme: light dark;

  --dark-headline: #f4f4f4;
  --dark-ink: #d2d2d2;
  --dark-muted: #8e8e8e;
  --dark-rule: #3a3a3a;
  --dark-accent: #6b6b6b;
  --dark-bg: #18181b;
  --dark-panel: #26262a;
  --dark-panel-edge: #383840;
  --dark-cell: #2e2e33;
  --dark-ok: #7fbf8f;
  --dark-bad: #e0806b;
  --dark-away: #2c3a31;
  --dark-blocked: #3e322d;
  --dark-c1: #203243; --dark-c1-edge: #5f8db5;
  --dark-c2: #243629; --dark-c2-edge: #5f8f6b;
  --dark-c3: #3a3221; --dark-c3-edge: #ab8d4f;
  --dark-c4: #2f293e; --dark-c4-edge: #8c78b0;
  --dark-c5: #3c2726; --dark-c5-edge: #b67470;
  --dark-c6: #1f3a38; --dark-c6-edge: #579a95;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --headline: var(--dark-headline); --ink: var(--dark-ink); --muted: var(--dark-muted);
    --rule: var(--dark-rule); --accent: var(--dark-accent); --bg: var(--dark-bg);
    --panel: var(--dark-panel); --panel-edge: var(--dark-panel-edge); --cell: var(--dark-cell);
    --ok: var(--dark-ok); --bad: var(--dark-bad); --away: var(--dark-away); --blocked: var(--dark-blocked);
    --c1: var(--dark-c1); --c1-edge: var(--dark-c1-edge); --c2: var(--dark-c2); --c2-edge: var(--dark-c2-edge); --c3: var(--dark-c3); --c3-edge: var(--dark-c3-edge); --c4: var(--dark-c4); --c4-edge: var(--dark-c4-edge); --c5: var(--dark-c5); --c5-edge: var(--dark-c5-edge); --c6: var(--dark-c6); --c6-edge: var(--dark-c6-edge);
  }
}
:root[data-theme="dark"] {
  --headline: var(--dark-headline); --ink: var(--dark-ink); --muted: var(--dark-muted);
  --rule: var(--dark-rule); --accent: var(--dark-accent); --bg: var(--dark-bg);
  --panel: var(--dark-panel); --panel-edge: var(--dark-panel-edge); --cell: var(--dark-cell);
  --ok: var(--dark-ok); --bad: var(--dark-bad); --away: var(--dark-away); --blocked: var(--dark-blocked);
  --c1: var(--dark-c1); --c1-edge: var(--dark-c1-edge); --c2: var(--dark-c2); --c2-edge: var(--dark-c2-edge); --c3: var(--dark-c3); --c3-edge: var(--dark-c3-edge); --c4: var(--dark-c4); --c4-edge: var(--dark-c4-edge); --c5: var(--dark-c5); --c5-edge: var(--dark-c5-edge); --c6: var(--dark-c6); --c6-edge: var(--dark-c6-edge);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
/* Everything a step smaller, as the browser's zoom out to 90 % would have it. */
html { zoom: 0.9; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  padding: 40px 24px;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
}
a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--accent); }
a:hover { color: var(--headline); border-bottom-color: var(--headline); }
.muted { color: var(--muted); }
code, pre { font-family: var(--mono); }

main {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  padding: 40px 48px 48px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* The row above: status and the theme switch. */
.switch-row {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  color: var(--muted); margin: -16px 0 24px; text-transform: uppercase;
}
/* The next run on the left, the language and theme switches on the right. */
.switch-row .status { margin-right: auto; }
.status.busy { color: var(--headline); }
.status.busy::before { content: '■ '; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.theme-switch, .theme-switch:hover, .theme-switch:active { background: none; border: 0; padding: 0; box-shadow: none; transform: none; cursor: pointer; color: var(--muted); line-height: 0; }
.theme-switch:hover { color: var(--headline); }
.theme-switch:focus-visible { outline: 1px dotted var(--headline); outline-offset: 3px; }

/* Both languages live in the page; only the chosen one shows — as on rummeyer.com. */
[data-lang="en"] :lang(de), [data-lang="de"] :lang(en) { display: none; }
.lang-switch a { color: var(--muted); border-bottom: none; text-decoration: none; }
.lang-switch a:hover { color: var(--headline); }
.lang-switch .sep { margin: 0 8px; color: var(--rule); }
.lang-switch a[aria-current="true"] { color: var(--headline); font-weight: 700; }
.theme-icon { display: none; shape-rendering: crispEdges; }
[data-theme-pref="light"] .theme-icon-light,
[data-theme-pref="dark"] .theme-icon-dark,
[data-theme-pref="auto"] .theme-icon-auto { display: block; }

.masthead { text-align: center; margin-bottom: 32px; }
.masthead h1 {
  font-family: var(--mono); font-weight: 700; font-size: clamp(26px, 5vw, 46px);
  letter-spacing: 2px; margin: 0; color: var(--headline);
  text-shadow: 3px 3px 0 var(--rule);
}
.tagline {
  font-family: var(--mono); font-size: 13px; letter-spacing: 5px;
  text-transform: uppercase; color: var(--muted); margin: 14px 0 0;
}

/* Register cards. */
.tabs {
  display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px dotted var(--rule); margin-bottom: 28px;
}
.tabs a {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--muted); border: 1px solid transparent; border-bottom: 0; padding: 10px 14px 8px;
  position: relative; top: 2px;
}
.tabs a:hover { color: var(--headline); }
.tabs a.on {
  color: var(--headline); font-weight: 700; background: var(--panel);
  border-color: var(--panel-edge); border-bottom: 2px solid var(--panel);
}

h2 {
  font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 4px;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 2px dotted var(--rule); padding-bottom: 10px; margin: 40px 0 16px;
}
.tab > h2:first-child, .tab > .month-nav:first-child { margin-top: 8px; }

ul.arrows { list-style: none; padding: 0; margin: 0; }
ul.arrows li { padding-left: 28px; position: relative; margin: 6px 0; }
ul.arrows li::before { content: '›'; position: absolute; left: 6px; color: var(--accent); }

/* Controls. */
button, .button {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink); background: var(--panel); border: 1px solid var(--rule);
  padding: 10px 16px; cursor: pointer; box-shadow: 2px 2px 0 var(--rule);
}
button:hover, .button:hover { color: var(--headline); border-color: var(--headline); }
button:active { transform: translate(2px, 2px); box-shadow: none; }
button.strong { background: var(--headline); color: var(--panel); border-color: var(--headline); box-shadow: 2px 2px 0 var(--accent); }
button.strong:hover { color: var(--panel); opacity: 0.9; }
button.plain { box-shadow: none; border: 0; background: none; font-size: 20px; padding: 4px 12px; }
button.link { box-shadow: none; border: 0; background: none; padding: 2px 6px; color: var(--muted); font-size: 10px; }
button.link:hover { color: var(--bad); }
button:disabled { opacity: 0.4; cursor: default; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 20px; }
.actions.sticky { position: sticky; bottom: 0; background: var(--panel); padding: 14px 0; border-top: 2px dotted var(--rule); }

input, select {
  font: 14px/1.3 var(--mono); color: var(--ink); background: var(--cell);
  border: 1px solid var(--panel-edge); padding: 6px 9px; min-width: 0;
}
input:focus, select:focus { outline: 1px dotted var(--headline); outline-offset: 1px; }
input[readonly] { color: var(--muted); }
label.check { display: inline-flex; align-items: center; gap: 6px; }
label.check input { width: auto; }

/* Travel: the month and its calendar. */
.month-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
.month-title { border: 0; margin: 8px 0; padding: 0; font-size: 18px; color: var(--headline); min-width: 260px; text-align: center; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: 13px; color: var(--muted); margin: 6px 0 14px; }
.legend .k::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 1px solid var(--rule); }

.legend .blocked::before { background: repeating-linear-gradient(45deg, var(--blocked) 0 3px, var(--panel) 3px 6px); }
.legend .holiday::before { background: var(--cell); }
.legend .off::before { background: transparent; border-style: dotted; }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar .wd { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--muted); text-align: center; padding-bottom: 4px; }
.day {
  min-height: 92px; border: 1px solid var(--panel-edge); padding: 5px 7px; font-size: 12px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.day .n { font-size: 14px; font-weight: 700; color: var(--headline); }
.day .who { color: var(--ink); overflow-wrap: anywhere; }
.day .eur { margin-top: auto; color: var(--muted); font-size: 11px; }
.day .eur { display: flex; flex-wrap: wrap; gap: 1px 8px; }

/* Pixel icons: crisp, in shades of the text's colour. */
.px { width: 9px; height: 9px; fill: currentColor; shape-rendering: crispEdges; vertical-align: -1px; margin-right: 4px; flex: none; }
.px16 { width: 16px; height: 16px; vertical-align: -4px; margin-right: 3px; } /* one screen pixel each */
.amount { white-space: nowrap; display: inline-flex; align-items: center; }
.totals dt .px { margin-right: 6px; }
.legend-icons { margin-top: -8px; }
.legend-icons .px { margin-right: 5px; }
.day.travel { border-color: var(--ink); background: var(--panel); }
.day.travel.assigned .who::after { content: ' ★'; color: var(--accent); }
.day.away { background: var(--away); border-color: var(--ok); }
/* A client's days in its colour, a day trip or away; away, the moon in the corner. */
.day.c1, .legend .c1::before { background: var(--c1); border-color: var(--c1-edge); }
.day.c2, .legend .c2::before { background: var(--c2); border-color: var(--c2-edge); }
.day.c3, .legend .c3::before { background: var(--c3); border-color: var(--c3-edge); }
.day.c4, .legend .c4::before { background: var(--c4); border-color: var(--c4-edge); }
.day.c5, .legend .c5::before { background: var(--c5); border-color: var(--c5-edge); }
.day.c6, .legend .c6::before { background: var(--c6); border-color: var(--c6-edge); }
.day { position: relative; }
.day .moon { position: absolute; top: 6px; right: 7px; color: var(--ink); opacity: .7; line-height: 0; }
.day.blocked { background: repeating-linear-gradient(45deg, var(--blocked) 0 6px, var(--panel) 6px 12px); }
.day.holiday, .day.christmas { background: var(--cell); color: var(--muted); }
.day.weekend, .day.home { border-style: dotted; color: var(--muted); }
.day.weekend .n, .day.home .n, .day.holiday .n, .day.christmas .n { color: var(--muted); }
.day.pad { border: 0; }
.day.today { box-shadow: inset 0 0 0 2px var(--accent); }

.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 22px 0 0; }
.totals div { border: 1px solid var(--panel-edge); padding: 10px 14px; }
.totals dt { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.totals dd { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: var(--headline); white-space: nowrap; }

ul.rows { list-style: none; padding: 0; margin: 0 0 10px; }
ul.rows li { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px dotted var(--rule); }
ul.rows li .grow { flex: 1; }
ul.rows li .when { color: var(--headline); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Zuordnungen on one line: a short note. With an overnight trip's checkboxes, note and button go beneath. */
#a-client { width: 190px; }
#a-note { width: 120px; }
#assignment-form input[type=date] { padding-left: 6px; padding-right: 4px; }
#assignment-form button[type=submit] { padding-left: 12px; padding-right: 12px; }

/* Invoice. */
.drop {
  border: 2px dashed var(--rule); padding: 28px; text-align: center; color: var(--muted); cursor: pointer; position: relative;
}
.drop.over { border-color: var(--headline); color: var(--headline); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; margin-top: 18px; }
.grid label { display: grid; gap: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.grid .span { grid-column: 1 / -1; }

/* Jobs and their output. */
.last { margin: 0; color: var(--muted); font-size: 14px; }
.console {
  margin-top: 18px; border: 1px solid var(--panel-edge); background: var(--cell); padding: 12px 14px;
}
.console .head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.console .title { color: var(--headline); }
.console pre {
  margin: 10px 0 0; max-height: 360px; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-size: 12.5px; line-height: 1.45; letter-spacing: 0;
}
/* One file a line: several Belege of a run, one under the other. */
.console .files { margin-top: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.badge { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
.badge.ok { color: var(--ok); }
.badge.failed { color: var(--bad); }
.badge.running { color: var(--headline); animation: blink 1s steps(1) infinite; }
.jobs li { cursor: pointer; }
.jobs li:not(.detail):hover .title { color: var(--headline); }
.jobs li.detail { display: block; cursor: default; padding: 0 0 12px; }
.jobs li.detail .console { margin-top: 0; }
/* Title and status stand in the entry above already. */
.jobs li.detail .console .head { display: none; }
.jobs li.detail .console pre { margin-top: 0; }
.jobs li.on { background: var(--cell); }

/* Settings. */
fieldset { border: 0; padding: 0; margin: 0; }
.client { border: 1px dotted var(--rule); padding: 12px; margin-top: 12px; position: relative; }
.client .remove { position: absolute; top: 6px; right: 6px; }

footer {
  max-width: 1000px; margin: 16px auto 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}

@media (max-width: 720px) {
  body { font-size: 14px; padding: 16px 8px; }
  main { padding: 28px 16px 32px; }
  .calendar { gap: 2px; }
  .day { min-height: 60px; font-size: 10px; padding: 2px 3px; }
  .day .eur, .day .note { display: none; }
  .tabs a { padding: 8px 8px 6px; font-size: 10px; letter-spacing: 1px; }
}
.totals dd.muted { font-size: 13px; font-weight: 400; color: var(--muted); }

/* Cron. */
.schedule { display: grid; gap: 10px; }
.entry { border: 1px solid var(--panel-edge); padding: 10px 12px; }
.entry.off { border-style: dotted; }
.entry.off select, .entry.off input:not([type=checkbox]) { color: var(--muted); }
.entry-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.entry-head select { flex: 1 1 260px; }
.entry-head input:not([type=checkbox]) { width: 170px; }
.entry-next, .entry-last { margin-top: 6px; }
.small { font-size: 13px; }
.totals .whole { grid-column: 1 / -1; }
.grid label.check { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: 11px; }

/* Settings where they are used. */
form.part h2 { margin-top: 40px; }
details.part-box { margin-top: 16px; }
details.part-box summary { cursor: pointer; color: var(--muted); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
details.part-box form.part { margin-top: 6px; }
ul.rows li.changed .when::after { content: ' •'; color: var(--bad); }
ul.rows li.editing { background: var(--cell); }
button.link.cancel { font-size: 11px; }

/* One save button for everything, at the bottom: red, and asking before it saves. */
.savebar {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 14px;
  background: var(--panel); border-top: 2px dotted var(--rule); padding: 14px 0; margin-top: 32px;
}
button.save { background: var(--bad); color: #fff; border-color: var(--bad); box-shadow: 2px 2px 0 var(--rule); padding: 12px 22px; }
button.save:hover { color: #fff; filter: brightness(1.1); }
/* Asking "Sicher?": red and grey by turns — the button stays — until it is clicked again, or
   gives up after 4 s. */
button.save.armed { animation: armed 0.8s steps(1) infinite; }
@keyframes armed { 50% { background: var(--panel); color: var(--muted); border-color: var(--rule); } }
button.save:disabled { background: var(--panel); color: var(--muted); border-color: var(--rule); filter: none; }

/* A client abroad without its own rate, falling back to the inland one. */
.day.fallback .eur { color: var(--bad); }
.day.fallback .n::after { content: ' !'; color: var(--bad); }
.totals .warn { border-color: var(--bad); }
.totals .warn dt { color: var(--bad); }
.totals .warn dd { font-size: 13px; font-weight: 400; white-space: normal; color: var(--ink); }
input.missing { border-color: var(--bad); }

/* The logo instead of the name: on a light patch in the dark, where its navy would vanish. */
.masthead h1 { text-shadow: none; line-height: 0; }
/* The same box in both themes, only its colour changing: else the logo shrinks into the dark
   theme's patch, and the page beneath it jumps. */
.masthead img.logo { width: min(580px, 100%); height: auto; border-radius: 10px; padding: 8px 16px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .masthead img.logo { background: #ececeb; }
}
:root[data-theme="dark"] .masthead img.logo { background: #ececeb; }
.grid .break { grid-column: 1 / -1; height: 0; }

/* The month for the Harvest run: M/YYYY, as on the command line. */
.actions input.month { width: calc(7ch + 18px + 2ch); text-align: center; }

/* The employees: the selected one by its radio button, the name to edit beside it. */
ul.rows.staff li { align-items: center; }
ul.rows.staff li input[type=radio] { width: auto; margin: 0; }

/* The employee selected, and beside it the next run. */
/* Above the page, centred: the employee, and Abmelden beside it, a rule between. */
.userbar {
  display: flex; justify-content: center; align-items: center; gap: 16px; margin: -24px 0 16px;
  font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.userbar #logout:not([hidden]) { border-left: 1px solid var(--rule); padding-left: 16px; }

/* The company's logo in the settings: as the work log shows it, on white. */
/* The logo's card, as sevDesk has it: empty, a button and room to drop a file; with a logo, a
   red × over it on hovering, and one more question before it goes. */
.logo-card {
  width: 340px; max-width: 100%; aspect-ratio: 1 / 0.85; margin-top: 10px; padding: 14px;
  background: #f2f2f0; color: #555; border-radius: 18px; display: flex;
}
/* Light in the dark theme too: the logo as it looks on paper. */
.logo-card .muted { color: #6f6f6c; }
.logo-card button:not(.danger):not(.logo-remove) { background: #fff; color: #222; border-color: #c9c9c5; }
.logo-empty, .logo-filled { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.logo-empty { border: 1.5px dashed #c4c4c0; border-radius: 12px; text-align: center; font-size: 12px; }
.logo-empty button { margin-bottom: 8px; }
.logo-card.over .logo-empty { border-color: #444; background: #fafaf8; }
.logo-filled { position: relative; }
.logo-preview { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .15s; }
.logo-remove, .logo-remove:hover, .logo-remove:active {
  position: absolute; top: 50%; left: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0;
  border-radius: 50%; border: 0; background: var(--bad); color: #fff; box-shadow: none; transform: none;
  font-size: 34px; line-height: 56px; text-align: center; cursor: pointer; letter-spacing: 0;
}
.logo-confirm { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.logo-confirm button.danger, .logo-confirm button.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
.logo-filled.confirming .logo-preview { opacity: .25; }
/* With a mouse, the × and the faded logo only while it is over the logo; a touch screen has no
   hovering, there the × stays. */
@media (hover: hover) {
  .logo-remove { opacity: 0; transition: opacity .15s; }
  .logo-filled:hover .logo-remove, .logo-remove:focus-visible { opacity: 1; }
  .logo-filled:hover .logo-preview { opacity: .35; }
}
.legend-clients { display: contents; } /* its clients, each a key of the legend */
.totals dt { min-height: 16px; display: flex; align-items: center; } /* with an icon or without, the same height: the amounts in one line */

/* An employee's password beside the name; the logout beside the employee at the top. */
ul.rows.staff li input.password { width: 15em; flex: none; }
/* Employees: fixed columns — choice, name, password, its removal, the row's removal — the same in
   every row, whether a password is set or not. */
ul.rows.staff.employees li { display: grid; grid-template-columns: auto minmax(0, 1fr) 15em 12em 6em; gap: 12px; }
ul.rows.staff.employees li input.password { width: 100%; }
ul.rows.staff.employees li .link { justify-self: end; }
#logout, #logout:hover { padding: 0; font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--muted); }
#logout:hover { color: var(--headline); }
/* The login: the masthead, and a small form beneath it. */
main.login { max-width: 560px; }
.login-form { display: grid; gap: 14px; max-width: 360px; margin: 10px auto 30px; }
.login-form label { display: grid; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.login-form .error { color: var(--bad); margin: 0; }

/* A month field that only shows, Vodafone's. */
input.month:disabled { opacity: .55; cursor: default; }