/* tomas-vizdal.cz: shared 90s stylesheet for the landing page (and projects).
   Served from /static/ by core nginx; the edge CSP forbids inline style. */

html { background: #008080; }

body {
  margin: 0;
  padding: 24px 12px;
  color: #000;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

code, pre, kbd { font-family: ui-monospace, "Courier New", monospace; }

a:link { color: #0000ee; }
a:visited { color: #551a8b; }
a:active { color: #ee0000; }

/* A raised grey window, Windows-95 style */
.window {
  max-width: 760px;
  margin: 0 auto;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #808080;
  padding: 3px;
}
.window.narrow { max-width: 460px; margin-top: 10vh; }

.titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px 3px 6px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
}
.controls span {
  display: inline-block;
  width: 16px;
  height: 14px;
  margin-left: 2px;
  background: #c0c0c0;
  color: #000;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
}

.menubar { padding: 2px 4px; border-bottom: 1px solid #808080; }
.menubar span { margin-right: 14px; }

.content { padding: 10px 14px 14px; }

h1 { font-size: 26px; margin: 6px 0 10px; }
h2 { font-size: 18px; margin: 18px 0 6px; }
.lead { font-size: 16px; }

hr {
  border: 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #fff;
  margin: 16px 0;
}

.construction {
  margin: 14px 0;
  padding: 7px;
  text-align: center;
  background: repeating-linear-gradient(45deg, #ffd800 0 14px, #000 14px 28px);
  border: 2px solid #000;
}
.construction span {
  display: inline-block;
  padding: 2px 12px;
  background: #ffd800;
  border: 1px solid #000;
  font-weight: bold;
  letter-spacing: 2px;
}

/* Real tables with sunken cells */
table.list { border-collapse: separate; border-spacing: 2px; width: 100%; background: #c0c0c0; }
table.list th, table.list td {
  padding: 4px 8px;
  text-align: left;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
}
table.list th { background: #c0c0c0; border-color: #fff #808080 #808080 #fff; }
table.list td { background: #fff; }
table.list td.empty { color: #404040; font-style: italic; text-align: center; }

/* Bevelled buttons and 88x31-ish badges */
.button, .badge {
  display: inline-block;
  padding: 3px 10px;
  background: #c0c0c0;
  color: #000;
  text-decoration: none;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow: inset -1px -1px #808080;
}
.button:active { border-color: #000 #fff #fff #000; box-shadow: inset 1px 1px #808080; }
.button:link, .button:visited { color: #000; }
.badges { text-align: center; }
.badge { margin: 3px; font: bold 11px ui-monospace, "Courier New", monospace; }

.statusbar { display: flex; gap: 3px; margin-top: 3px; font-size: 13px; }
.statusbar span {
  flex: 1;
  padding: 1px 6px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
}
.statusbar span:last-child { flex: 0 0 auto; }

@media (max-width: 480px) {
  body { padding: 8px 4px; }
  h1 { font-size: 21px; }
  .menubar { display: none; }
}