/* ABC Areal by Dinamo, self-hosted from public/fonts/ (not committed). */
@font-face {
  font-family: "ABC Areal";
  src: url("./fonts/ABCAreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("./fonts/ABCAreal-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("./fonts/ABCAreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("./fonts/ABCAreal-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("./fonts/ABCAreal-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ABC Areal";
  src: url("./fonts/ABCAreal-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --fg: #222;
  --muted: #888;
  --border: #e5e5e5;
  --bg: #fff;
  --column-bg: #fff;
  --selected: #0a64d9;
  --selected-fg: #fff;
  --selected-inactive: #dcdcdc;
  --channel: grey;
  --scrollbar: #c8c8c8;
  --scrollbar-track: #f2f2f2;
  --column-width: 240px;
  font-family: "ABC Areal", Arial, sans-serif;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #eee;
    --muted: #999;
    --border: #333;
    --bg: #1e1e1e;
    --column-bg: #1e1e1e;
    --selected-inactive: #3a3a3a;
    --scrollbar: #555;
    --scrollbar-track: #262626;
  }
}

* {
  box-sizing: border-box;
  /* A flat track, without the browser's default border. */
  scrollbar-color: var(--scrollbar) var(--scrollbar-track);
}

/* Safari doesn't support scrollbar-color yet. */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }

  ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 5px;
    background: var(--scrollbar) padding-box;
  }
}

html,
body,
#app {
  height: 100%;
  margin: 0;
}

.browser {
  display: flex;
  height: 100%;
}

/* Columns */

.columns {
  display: flex;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.column {
  flex: 0 0 var(--width, var(--column-width));
  overflow-y: auto;
  background: var(--column-bg);
}

/* Border between columns, draggable to resize the column on its left */
.column-resizer {
  position: relative;
  flex: 0 0 1px;
  /* Invisible; the col-resize cursor shows where it is. */
  cursor: col-resize;
  touch-action: none;
}

/* Wider grab area than the 1px line */
.column-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  right: -4px;
  z-index: 2;
}

.column-header {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px 8px;
  background: var(--column-bg);
  border-bottom: 1px solid var(--border);
}

.column-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The title takes the free space, so buttons sit at either end. */
.column-header-top strong {
  flex: 1;
  min-width: 0;
}

/* The root's edit button, before the title: line its icon up with the
   text below. */
.column-header-top > .header-button:first-child {
  margin: 0 -4px 0 -3px;
}

.column-header strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.column-header a {
  color: inherit;
  text-decoration: none;
}

.column-header a:hover {
  text-decoration: underline;
}

/* Reverse and filter buttons in a column header */
.header-buttons {
  display: flex;
  flex-shrink: 0;
  align-self: center;
  gap: 2px;
}

.header-button {
  flex-shrink: 0;
  align-self: center;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

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

.header-button[aria-pressed="true"] {
  color: var(--fg);
  background: var(--border);
}

.root-input {
  box-sizing: border-box;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
}

.column-count {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 12px;
}

.column-meta {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.column-meta span {
  white-space: nowrap;
}

/* Updated date with the reverse and filter buttons at its end. */
.column-meta-last {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Taller than the text; don't let them grow the line. */
.column-meta-last .header-buttons {
  margin: -3px 0;
}

.column ul {
  list-style: none;
  margin: 0;
  padding: 4px 6px;
}

.row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 4px;
  margin: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
  /* Lets .tile size against the row's width with cqw units. */
  container-type: inline-size;
}

/* Inset shadow instead of border so channel rows stay the same size. */
.row--channel {
  box-shadow: inset 0 0 0 1px var(--channel);
}

.row.open {
  background: var(--selected-inactive);
}

.row.previewed {
  background: var(--selected);
  color: var(--selected-fg);
}

.row-title {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Keep the title readable on the blue previewed highlight. */
.row.previewed .row-title {
  color: inherit;
}

.tile {
  display: block;
  width: 100%;
  height: auto;
  /* No taller than it is wide; tall images are letterboxed. */
  max-height: 100cqw;
  border-radius: 4px;
  object-fit: contain;
}

.tile--channel,
.tile--text,
.tile--file {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  background: var(--bg);
}

.tile--channel {
  /* The row's own channel border already outlines it. */
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  overflow-wrap: anywhere;
}

.tile-title {
  margin-bottom: 4px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
}

.tile--text {
  overflow: hidden;
  padding: 10px 12px;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  /* Fade the overflowing text out at the bottom. */
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

.tile--file {
  background: var(--border);
}

.status {
  margin: 8px 14px;
  color: var(--muted);
  font-size: 12px;
}

.error {
  color: #c33;
}

.more {
  display: block;
  margin: 8px auto 16px;
  font: inherit;
  font-size: 12px;
}

/* Right-hand panel: the preview with a bar below it */

.side {
  position: relative;
  display: flex;
  flex: 0 0 var(--side-width, clamp(320px, 38vw, 560px));
  flex-direction: column;
  /* Otherwise it can't be dragged narrower than its contents. */
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--border);
}

/* Draggable left edge of the right panel */
.side-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  z-index: 2;
  width: 8px;
  cursor: col-resize;
  touch-action: none;
}

.side-resizer:hover,
.side-resizer:active {
  background: linear-gradient(var(--border), var(--border)) center / 2px 100%
    no-repeat;
}

.navbar {
  flex-shrink: 0;
  /* Clips the buttons when the panel is dragged very narrow. */
  overflow: hidden;
  border-top: 1px solid var(--border);
}

.navbar-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 16px;
}

.navbar-row + .navbar-row {
  border-top: 1px solid var(--border);
}

.column-width {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.column-width input {
  /* Shares the shrinking with the labels. Its default ~130px width would
     otherwise keep the row from shrinking at all. */
  flex: 1 1 100px;
  width: 0;
  min-width: 60px;
  accent-color: var(--fg);
}

.column-width-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.navbar-status {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navbar-status.error {
  color: #c33;
}

/* Pushes the account status and button to the right. */
.api-calls {
  margin-right: auto;
  font-variant-numeric: tabular-nums;
}

.navbar button {
  flex-shrink: 0;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.navbar button:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

/* Preview */

.preview {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

/* The close button is only needed on phones, where the preview covers
   the screen. */
.preview-bar {
  display: none;
}

.preview.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.preview-media {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.preview-image {
  max-width: 100%;
  max-height: 50vh;
  border-radius: 6px;
  object-fit: contain;
}

.preview-text {
  width: 100%;
  max-height: 50vh;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.preview h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.preview-kind {
  margin: 2px 0 16px;
  color: var(--muted);
}

.preview-description {
  white-space: pre-wrap;
}

.preview h3 {
  margin: 16px 0 4px;
  font-size: 15px;
}

.info {
  margin: 0 0 16px;
}

/* Value beside its label, or on the next line when they don't fit. */
.info-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.info-row dt {
  color: var(--muted);
}

.info-row dd {
  margin: 0;
  /* Only break inside a word that can't fit on a line of its own. */
  overflow-wrap: break-word;
}

.preview a {
  color: var(--selected);
}

/*
 * Phones: the columns fill the screen with the navbar under them. A
 * previewed block opens full screen over everything until it's closed.
 */
@media (max-width: 700px) {
  .browser {
    flex-direction: column;
  }

  .columns {
    flex: 1;
    min-height: 0;
  }

  .side-resizer {
    display: none;
  }

  .side {
    flex: 0 0 auto;
    border-left: 0;
  }

  .preview.empty {
    display: none;
  }

  /*
   * Two columns per screen (each plus its 1px divider is half the width),
   * ignoring widths saved on desktop, so there's no slider or dragging.
   */
  .column {
    flex-basis: calc(50vw - 1px);
  }

  .column-resizer {
    pointer-events: none;
  }

  .column-width-row {
    display: none;
  }

  .column-width-row + .navbar-row {
    border-top: 0;
  }

  .preview {
    position: fixed;
    inset: 0;
    z-index: 20;
    padding: 16px;
    background: var(--bg);
  }

  /* Holds the close button, staying put while the preview scrolls. */
  .preview-bar {
    position: sticky;
    top: -16px;
    z-index: 1;
    display: flex;
    justify-content: flex-end;
    margin: -16px -16px 0;
    padding: 8px;
  }

  .preview-bar .header-button {
    padding: 6px;
    background: var(--bg);
  }
}