:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #505050;
  --faint: #a8a8a8;
  --line: #e8e8e8;
  --error: #6e5353;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .08em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select { color: inherit; font: inherit; }
button { cursor: pointer; }
.shell { width: min(1180px, calc(100% - 56px)); margin: 0 auto; }
.mast {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .19em;
}
.mast nav { display: flex; align-items: center; gap: 26px; }
.mast form { display: inline; }
.mast button, .link-button {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  letter-spacing: .19em;
}
main { padding: 10vh 0 90px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 38px; font-size: 14px; font-weight: 400; letter-spacing: .24em; }
h2 { margin: 0 0 16px; font-size: 12px; font-weight: 400; letter-spacing: .22em; }
.eyebrow { margin-bottom: 12px; color: var(--faint); font-size: 11px; letter-spacing: .24em; }
.login-panel, .narrow { width: min(340px, 100%); margin: 8vh auto 0; }
.stack, .login-panel form { display: grid; gap: 26px; }
label { display: grid; gap: 8px; font-size: 11px; letter-spacing: .18em; }
input, select {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #bdbdbd;
  border-radius: 0;
  background: transparent;
  outline: none;
  letter-spacing: .08em;
}
input:focus, select:focus { border-bottom-color: var(--ink); }
small { color: var(--faint); font-size: 10px; font-weight: 400; letter-spacing: .14em; }
.login-panel button, .stack > button, .compact-form > button, .admin-form > button {
  justify-self: start;
  margin-top: 10px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  font-size: 11px;
  letter-spacing: .2em;
}
.workspace { max-width: 960px; margin: 0 auto; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 36px; }
.back { padding-top: 22px; color: #777; font-size: 11px; letter-spacing: .17em; }
.project-list { border-top: 1px solid var(--line); }
.project-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 90px;
  gap: 30px;
  align-items: center;
  min-height: 78px;
  border-bottom: 1px solid var(--line);
  transition: padding 160ms ease, opacity 160ms ease;
}
.project-row:hover { padding-left: 4px; opacity: .72; }
.project-row span { color: #888; font-size: 11px; letter-spacing: .18em; }
.project-row strong { overflow: hidden; font-size: 14px; font-weight: 400; letter-spacing: .12em; text-overflow: ellipsis; white-space: nowrap; }
.project-row small { text-align: right; }
.file-group { margin-top: 54px; }
.file-list { border-top: 1px solid var(--line); }
.file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px 88px;
  gap: 24px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}
.file-row:hover .file-name { opacity: .58; }
.file-row > span:not(.file-name) { color: #999; text-align: right; }
.file-name { overflow-wrap: anywhere; transition: opacity 160ms ease; }
.flash { margin: 28px 0 -30px; text-align: center; font-size: 11px; letter-spacing: .18em; }
.flash.error { color: var(--error); }
.empty { padding: 36px 0; color: var(--faint); font-size: 11px; letter-spacing: .18em; }
.admin-nav { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 55px; font-size: 11px; letter-spacing: .18em; }
.admin-nav a { color: #aaa; }
.admin-nav a.active { color: var(--ink); }
.admin-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(48px, 8vw, 110px); }
.admin-form { display: grid; align-content: start; gap: 20px; }
.check-list { display: grid; gap: 8px; max-height: 220px; overflow: auto; padding: 14px 0; border-bottom: 1px solid var(--line); }
.check-list label { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.check-list input { width: auto; }
.data-list { border-top: 1px solid var(--line); }
.data-row { padding: 20px 0; border-bottom: 1px solid var(--line); }
.data-row-head { display: flex; justify-content: space-between; gap: 20px; }
.data-row strong { font-weight: 400; }
.meta { margin: 6px 0 0; color: #999; font-size: 10px; letter-spacing: .1em; }
.compact-form { display: grid; grid-template-columns: 1fr 150px auto; gap: 15px; align-items: end; margin-top: 15px; }
.compact-form > button { margin: 0; }
.inline-actions { display: flex; gap: 18px; align-items: center; }
.danger { color: #806363; }
.log-row { display: grid; grid-template-columns: 155px 180px 1fr 1.2fr 110px; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 11px; }

@media (max-width: 760px) {
  .shell { width: calc(100% - 36px); }
  .mast { min-height: 88px; }
  .mast nav { gap: 15px; }
  main { padding-top: 9vh; }
  .project-row { grid-template-columns: 1fr auto; gap: 8px 18px; padding: 18px 0; }
  .project-row strong { grid-column: 1 / -1; grid-row: 2; }
  .file-row { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .file-row .file-name { grid-column: 1 / -1; }
  .file-row > span:not(.file-name) { text-align: left; }
  .admin-grid { grid-template-columns: 1fr; }
  .compact-form { grid-template-columns: 1fr; }
  .log-row { grid-template-columns: 1fr 1fr; }
  .log-row span:nth-child(3), .log-row span:nth-child(4) { grid-column: 1 / -1; }
}