/* ==========================================================================
   app-deck.css — The Wired.

   TweetDeck's columns, drawn the way this machine draws everything else:
   fixed width, bevelled, lit from the top left, scrollbar on the left. The
   deck scrolls sideways and the columns do not resize, because in 1997 they
   would not have.
   ========================================================================== */

.dk-shelf .dk-acct {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; padding-right: 2px;
}
.dk-shelf .dk-add { max-width: 130px; }
.dk-saved { display: flex; gap: 3px; overflow: hidden; }
.dk-chip {
  font-size: 10px; padding: 1px 5px; font-family: var(--mono);
  letter-spacing: .02em; white-space: nowrap;
}

/* the deck itself: a row of panels, scrolled sideways */
.dk-deck {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: stretch; gap: 2px;
  overflow-x: auto; overflow-y: hidden;
  background: var(--lo);
  padding: 2px; scrollbar-width: thin;
}
.dk-deck::-webkit-scrollbar { height: 13px; }
.dk-deck::-webkit-scrollbar-track { background: var(--gray-dk); }
.dk-deck::-webkit-scrollbar-thumb {
  background: var(--gray); border: 1px solid var(--lo);
  box-shadow: inset 1px 1px 0 var(--hi);
}

.dk-col {
  flex: 0 0 272px; width: 272px;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--gray);
  border: 1px solid var(--lo);
  box-shadow: inset 1px 1px 0 var(--hi);
}

/* a column's title bar is the window title bar, one size down */
.dk-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  height: 18px; padding: 0 3px 0 5px;
  background: var(--gray-lt);
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 1px 0 var(--hi);
}
.dk-glyph { font-size: 10px; opacity: .8; }
.dk-title {
  flex: 1 1 auto; font-size: 11px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.dk-count {
  font-family: var(--mono); font-size: 10px; opacity: .7;
  font-variant-numeric: tabular-nums;
}
.dk-x {
  width: 13px; height: 13px; line-height: 11px; padding: 0;
  font-size: 12px; text-align: center; cursor: pointer;
  background: var(--gray); color: var(--ink);
  border: 1px solid var(--lo); box-shadow: inset 1px 1px 0 var(--hi);
}
.dk-x:active { box-shadow: inset 1px 1px 0 var(--lo); }

.dk-sub {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  padding: 2px 4px; font-size: 10px; line-height: 1.25;
  color: #3a3a3a; background: var(--gray-dk);
  border-bottom: 1px solid var(--lo);
}
.dk-sub > span {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-find { flex: 0 0 62px; font-size: 10px; padding: 0 2px; height: 15px; }

/* scrollbar on the left, the way it is everywhere else in this machine */
.dk-list {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  direction: rtl; background: var(--paper);
  scrollbar-width: thin;
}
.dk-list > * { direction: ltr; }
.dk-list::-webkit-scrollbar { width: 13px; }
.dk-list::-webkit-scrollbar-track { background: var(--gray-dk); }
.dk-list::-webkit-scrollbar-thumb {
  background: var(--gray); border: 1px solid var(--lo);
  box-shadow: inset 1px 1px 0 var(--hi);
}

.dk-row {
  padding: 5px 7px 4px; border-bottom: 1px solid #d4d4d4;
  font-size: 11.5px; line-height: 1.38; word-break: break-word;
}
.dk-row.rt { background: #f4f4f0; }
.dk-row.re { background: #f7f5ee; }

.dk-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 2px; }
.dk-who {
  flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 10.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dk-when {
  font-family: var(--mono); font-size: 9.5px; opacity: .6;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.dk-text { white-space: pre-wrap; }
.dk-at  { color: #0d2f8f; }
.dk-tag { color: #6a4b00; }
.dk-url { color: #555; border-bottom: 1px dotted #999; cursor: default; }

.dk-med {
  display: block; width: 100%; margin: 4px 0 1px;
  border: 1px solid var(--lo); box-shadow: inset 1px 1px 0 var(--hi);
  background: #000;
}

.dk-foot {
  display: flex; align-items: baseline; gap: 6px; margin-top: 3px;
  font-family: var(--mono); font-size: 9px; opacity: .55;
  font-variant-numeric: tabular-nums;
}
.dk-src { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the columns that are not posts */
.dk-row.like { font-size: 11px; color: #2a2a2a; }
.dk-row.word {
  padding: 2px 7px; font-size: 11px;
  border-bottom: 1px solid #e4e4e4;
}
.dk-row.word:nth-child(even) { background: #f6f6f2; }

.dk-row.ad { background: #f2efe6; }
.dk-why { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.dk-crit {
  font-size: 9px; font-family: var(--mono); padding: 0 3px;
  background: var(--gray-lt); border: 1px solid var(--lo);
  box-shadow: inset 1px 1px 0 var(--hi);
}

/* .statusline is a plain block everywhere else; the deck asks for a row. */
.dk-status { display: flex; align-items: baseline; gap: 8px; }
.dk-status .spacer { flex: 1 1 auto; }
.dk-status .meta { white-space: nowrap; }

/* A narrow screen cannot hold a deck. One column at a time, full width —
   which is what TweetDeck on a phone became anyway. */
@media (max-width: 700px) {
  .dk-col { flex: 0 0 88vw; width: 88vw; }
  .dk-saved { display: none; }
}