/* =========================================================
   THE STUDY — minimal dufs skin
   ========================================================= */

:root {
  color-scheme: dark;

  --bg-primary: #0b0b0a;
  --bg-hover: #10100e;

  --text-primary: #ddd8cc;
  --text-secondary: #77736a;
  --text-tertiary: #45433e;

  --svg-primary: #ddd8cc;
  --svg-secondary: #55524b;
  --svg-tertiary: #55524b;

  --border-primary: #252420;
  --border-secondary: #252420;

  --gold: #b99552;
  --gold-hover: #c8a866;
}

html {
  font-family:
    ui-monospace,
    "SF Mono",
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;

  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-primary);
}

body {
  min-width: 538px;
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
}

svg {
  fill: var(--svg-primary);
}

.hidden {
  display: none !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.study-header {
  width: min(1080px, calc(100% - 56px));

  /* More breathing room from the top */
  height: 92px;

  margin: 18px auto 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: transparent;
  border-bottom: 1px solid var(--border-primary);

  position: relative;
  z-index: 2;

  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

.study-header a {
  color: var(--text-primary);
  text-decoration: none;

  font-size: 14px;
  letter-spacing: .28em;
  text-transform: uppercase;

  transition: color .15s ease;
}

.study-header a:hover {
  color: var(--gold);
}

.study-header .mark {
  color: var(--gold);
  font-size: 8px;
}


/* =========================================================
   NAVIGATION / CONTROLS
   ========================================================= */

.head {
  width: min(1080px, calc(100% - 56px));

  /* Slightly taller than before */
  min-height: 58px;

  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;

  padding: 0;

  position: relative;
  z-index: 1;

  background: transparent;
  border-bottom: 1px solid var(--border-secondary);
}

.breadcrumb {
  max-width: 70%;
  padding-right: .6em;

  color: var(--text-tertiary);
  font-size: 10px;
  letter-spacing: .04em;

  word-break: break-all;
}

.breadcrumb > a {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color .15s ease;
}

.breadcrumb > a:hover {
  color: var(--gold);
}

.breadcrumb > b {
  color: var(--text-secondary);
  font-weight: normal;
}

.breadcrumb > .separator {
  color: var(--text-tertiary);
  padding: 0 7px;
}

.breadcrumb svg {
  height: 12px;
  fill: var(--svg-secondary);
  vertical-align: -2px;
}


/* =========================================================
   DUFS CONTROLS
   ========================================================= */

.toolbox {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: 8px;
}

.toolbox > a,
.toolbox > div {
  height: 16px;
}

.toolbox .control {
  cursor: pointer;
  padding-left: 0;
  opacity: .38;

  transition:
    opacity .15s ease,
    color .15s ease;
}

.toolbox .control:hover {
  opacity: 1;
}

.toolbox .control:hover svg {
  fill: var(--gold);
}

.upload-file input {
  display: none;
}

.upload-file label {
  cursor: pointer;
}


/* Search */

.searchbar {
  display: flex;
  flex-wrap: nowrap;

  width: 170px;
  height: 22px;

  margin-left: auto;
  margin-bottom: 0;

  background: transparent;

  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;

  transition: border-color .15s ease;
}

.searchbar:focus-within {
  border-bottom-color: var(--border-primary);
}

.searchbar #search {
  box-sizing: border-box;

  width: 100%;
  height: 100%;

  padding: 1px 0;

  color: var(--text-primary);
  background: transparent;

  border: none;
  outline: none;

  font-size: 11px;
  line-height: 16px;
}

.searchbar #search::placeholder {
  color: transparent;
}

.searchbar:focus-within #search::placeholder {
  color: var(--text-tertiary);
}

.searchbar .icon {
  color: var(--svg-tertiary);
  padding: 3px 5px 3px 0;
  cursor: pointer;
}

.searchbar svg {
  width: 13px;
  height: 13px;
  fill: var(--svg-tertiary);
}

.toolbox-right {
  margin-left: 13px;
  margin-right: 0;
}

.toolbox-right > div {
  opacity: .4;
  transition: opacity .15s ease;
}

.toolbox-right > div:hover {
  opacity: 1;
}

.login-btn,
.save-btn,
.logout-btn {
  cursor: pointer;
}


/* =========================================================
   DIRECTORY
   ========================================================= */

.main {
  width: min(1080px, calc(100% - 56px));

  margin: 0 auto;

  /*
   * Increased separation from the navigation.
   * This is the main change that makes the directory
   * feel intentionally positioned rather than cramped.
   */
  padding: 64px 0 90px;
}

.empty-folder {
  padding: 40px 0;

  color: var(--text-tertiary);
  font-style: italic;
}


/* Hide table headings */

.paths-table thead,
.uploaders-table thead {
  display: none;
}

.uploaders-table,
.paths-table {
  width: 100%;

  border-collapse: collapse;
  border-spacing: 0;
}

.uploaders-table td,
.paths-table td {
  white-space: nowrap;
}


/* =========================================================
   DIRECTORY ROWS
   ========================================================= */

.paths-table tbody tr,
.uploaders-table tbody tr {
  height: 54px;

  border-bottom: 1px solid var(--border-secondary);

  transition:
    background-color .12s ease,
    border-color .12s ease;
}

.paths-table tbody tr:first-child,
.uploaders-table tbody tr:first-child {
  border-top: 1px solid var(--border-primary);
}

.paths-table tbody tr:hover,
.uploaders-table tbody tr:hover {
  background-color: var(--bg-hover);
}


/* Folder / file icon */

.path svg {
  width: 14px;
  height: 14px;

  padding-right: 11px;

  fill: var(--svg-secondary);

  vertical-align: text-top;

  transition: fill .12s ease;
}

.paths-table tbody tr:hover .path svg {
  fill: var(--gold);
}


/* Name */

.path {
  list-style: none;
}

.path a {
  display: block;

  min-width: 170px;
  max-width: calc(100vw - 375px);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--text-primary);
  text-decoration: none;

  font-size: 12px;

  transition: color .12s ease;
}

.path a:hover {
  color: var(--gold);
  text-decoration: none;
}


/* Metadata */

.paths-table .cell-mtime {
  width: 120px;

  padding-left: 15px;

  color: var(--text-tertiary);

  font-size: 9px;
  font-variant-numeric: tabular-nums;
}

.paths-table .cell-size {
  width: 70px;

  padding-left: 15px;

  color: var(--text-tertiary);

  font-size: 9px;
  font-variant-numeric: tabular-nums;

  text-align: right;
}


/* Actions */

.paths-table .cell-actions {
  width: 90px;

  display: flex;

  padding-left: 12px;

  opacity: 0;

  transition: opacity .12s ease;
}

.paths-table tbody tr:hover .cell-actions,
.paths-table tbody tr:focus-within .cell-actions {
  opacity: 1;
}

.action-btn {
  padding-right: 8px;
  cursor: pointer;
}

.action-btn svg {
  width: 13px;
  height: 13px;
}

.action-btn:hover svg {
  fill: var(--gold);
}


/* =========================================================
   UPLOAD ROWS
   ========================================================= */

.uploaders-table {
  padding: 0;
}

.uploader {
  padding-right: 1em;
}

.cell-status {
  color: var(--gold);
  font-size: 9px;
}


/* =========================================================
   EDITOR
   ========================================================= */

.editor {
  width: 100%;
  height: calc(100vh - 190px);

  padding: 22px;

  background: var(--bg-primary);
  color: var(--text-primary);

  border: 1px solid var(--border-secondary);
  outline: none;

  font-family:
    ui-monospace,
    "SF Mono",
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 13px;
  line-height: 1.7;
}

.editor:focus {
  border-color: var(--gold);
}

.not-editable {
  color: var(--text-secondary);
  font-style: italic;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .study-header,
  .head,
  .main {
    width: calc(100% - 36px);
  }

  .study-header {
    height: 78px;
    margin-top: 12px;
  }

  .head {
    min-height: 50px;
  }

  .main {
    padding-top: 44px;
  }

  .breadcrumb {
    max-width: 55%;
  }

  .searchbar {
    width: 120px;
  }

  .paths-table .cell-mtime,
  .paths-table .cell-size {
    display: none;
  }

  .paths-table .cell-actions {
    width: 55px;
  }

  .path a {
    max-width: calc(100vw - 110px);
  }
}

@media (min-width: 768px) {

  .path a {
    min-width: 400px;
  }
}


/* =========================================================
   DEFENSIVE
   ========================================================= */

.study-footer {
  display: none !important;
}