/* ---------------------------------------------------------------
   app.css — the launcher board, child windows, and feed rendering.
   --------------------------------------------------------------- */

/* ---- launcher board -------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: 218px minmax(0, 1fr) 218px;
  min-height: 660px;
}

.col { padding: 16px 10px 26px; display: flex; flex-direction: column; }
.col-main { padding: 16px 14px 30px; border-left: 1px solid var(--etch-dk); border-right: 1px solid var(--etch-dk); }
.col-side { overflow: hidden; }

.sec {
  font: italic bold 27px/1.15 var(--ui);
  color: #131313;
  margin: 4px 0 14px;
  padding-left: 4px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 11px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot-teal { background: #1c7a55; }
.dot-plum { background: #7b2f6d; }

.rule {
  border: 0;
  border-top: 1px solid var(--etch-dk);
  border-bottom: 1px solid var(--etch-lt);
  margin: 22px 4px 20px;
}

/* main column: strict 3-up grid so rows line up like the mock */
.col-main .tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  row-gap: 18px;
}
.col-main .tiles-indent > :first-child { grid-column: 2; }
.col-main .tiles-center {
  display: flex;
  justify-content: center;
  gap: 116px;
}

/* side columns: stack, vertically centred in the leftover space */
.tiles-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

.tile {
  background: none;
  border: 0;
  padding: 4px 2px 2px;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 176px;
  font: inherit;
  color: inherit;
}

.tile-img {
  width: 98px; height: 98px;
  display: grid; place-items: center;
  background: #fff;
  border: 3px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .32);
  transition: none;
}
.tile-img img { width: 84px; height: 84px; display: block; }

.tile:hover .tile-img { background: #f6fbff; border-color: #fff #5b7fb0 #5b7fb0 #fff; }
.tile:active .tile-img {
  border-color: var(--face-dk) var(--face-lt) var(--face-lt) var(--face-dk);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, .32);
  transform: translate(3px, 3px);
}

.tile-label {
  font: bold 19px/1.14 var(--label);
  color: #000;
  text-align: center;
}
.tile:hover .tile-label { color: #0b3fa8; }

/* ---- status bar (optional; see note in index.html) -------------- */

.statusbar {
  flex: 0 0 auto;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--face);
  border: 1px solid #7fa8e8;
  border-top: 1px solid #9d9d9d;
  font: 11px Tahoma, var(--label);
}
.sb-panel {
  border: 1px solid;
  border-color: #949494 #fff #fff #949494;
  padding: 3px 8px;
  display: flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-grow  { flex: 1; min-width: 0; }
.sb-fixed { color: #4a4a4a; }

/* ---- child windows --------------------------------------------- */

#layer { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

.subwin {
  position: absolute;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  background: var(--frame);
  border-radius: 9px 9px 4px 4px;
  padding: 0 4px 4px;
  box-shadow: 0 0 0 1px #0b3fa8, 0 14px 34px rgba(0, 0, 0, .42);
}
.subwin .titlebar { cursor: move; }
.subwin.dim .titlebar {
  background: linear-gradient(to bottom, #a8bde0 0%, #8ba6d4 46%, #7e9bcd 100%);
}
.subwin-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--face);
  border: 1px solid #7fa8e8;
  border-top: none;
  padding: 14px 16px 16px;
  font: 13px/1.45 Tahoma, var(--label);
}
.subwin-foot {
  flex: none;
  background: var(--face);
  border: 1px solid #7fa8e8;
  border-top: 1px solid #9d9d9d;
  padding: 9px 12px;
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
}
.subwin-foot .spacer { flex: 1; }

.modal-shade {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .18);
  pointer-events: auto;
}

/* ---- content ---------------------------------------------------- */

h3.hd { font: bold 15px/1.3 var(--ui); margin: 0 0 10px; }
p.note { font-size: 12px; color: #3a3a3a; margin: 6px 0; }
.warn {
  background: #ffffd8; border: 1px solid #b8b070;
  padding: 8px 10px; font-size: 12px; margin: 0 0 12px;
}
.warn strong { color: #7a2a0a; }
.err {
  background: #ffe9e9; border: 1px solid #c98080;
  padding: 8px 10px; font-size: 12px; margin: 0 0 12px; color: #7a1010;
}
.row { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.row > label { flex: 0 0 118px; font: bold 12px Tahoma, var(--label); }
.row > .fld { flex: 1; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.chk input { width: 14px; height: 14px; }

.toolbar {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 0 0 12px; margin: 0 0 12px;
  border-bottom: 1px solid var(--etch-dk);
  box-shadow: 0 1px 0 var(--etch-lt);
}
.toolbar .btn { min-width: 0; padding: 4px 10px; }
.toolbar .grow { flex: 1; }

.empty { padding: 40px 10px; text-align: center; color: #555; font-size: 13px; }
.spinner { padding: 30px 10px; text-align: center; color: #333; font-size: 13px; }

/* post list */
.post {
  background: #fff;
  border: 1px solid;
  border-color: var(--face-dk) #fff #fff var(--face-dk);
  padding: 10px 12px;
  margin: 0 0 8px;
}
.post-hd { display: flex; gap: 9px; align-items: flex-start; }
.avatar {
  width: 38px; height: 38px; flex: none;
  background: #dfe6ee center/cover no-repeat;
  border: 2px solid;
  border-color: var(--face-lt) var(--face-dk) var(--face-dk) var(--face-lt);
}
.post-who { flex: 1; min-width: 0; }
.post-name { font: bold 13px Tahoma, var(--label); }
.post-handle { font-size: 11.5px; color: #4a5a6a; }
.post-time { font-size: 11px; color: #6a6a6a; flex: none; }
.post-body { margin: 7px 0 0; white-space: pre-wrap; word-wrap: break-word; font-size: 13px; }
.post-body a { color: #0b3fa8; }
.post-ctx { font-size: 11px; color: #55606a; margin: 0 0 5px; font-style: italic; }
.post-embed {
  margin: 8px 0 0; border: 1px solid #b4bcc4; background: #f4f6f8;
  padding: 7px 9px; font-size: 12px;
}
.post-embed img { max-width: 100%; display: block; border: 1px solid #b4bcc4; margin: 4px 0 0; }
.post-acts { display: flex; gap: 5px; margin: 9px 0 0; flex-wrap: wrap; }
.post-acts .btn { min-width: 0; padding: 3px 9px; font-size: 11px; }
.post-acts .on { font-weight: bold; color: #0b3fa8; }
.count { color: #55606a; font-weight: normal; }

.profile-hd { display: flex; gap: 12px; margin: 0 0 12px; align-items: flex-start; }
.profile-hd .avatar { width: 64px; height: 64px; }
.profile-hd h3 { margin: 0; font: bold 16px var(--ui); }
.stat { font-size: 12px; color: #3a4a5a; }

.trend-list { list-style: none; margin: 0; padding: 0; }
.trend-list li { border-bottom: 1px dotted #9a9a9a; }
.trend-list button {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 8px 6px; font: 13px Tahoma, var(--label);
}
.trend-list button:hover { background: #0a246a; color: #fff; }
.trend-list .sub { font-size: 11px; color: #55606a; }
.trend-list button:hover .sub { color: #cfe0ff; }

.charcount { font-size: 11px; color: #4a4a4a; }
.charcount.over { color: #c00; font-weight: bold; }

/* ---- small screens --------------------------------------------- */

@media (max-width: 900px) {
  .desktop { padding: 0; align-items: stretch; }
  .win { border-radius: 0; padding: 0; width: 100%; }
  .titlebar { border-radius: 0; margin: 0; }
  .cols { grid-template-columns: 1fr; min-height: 0; }
  .col-main { border-left: 0; border-right: 0; border-top: 1px solid var(--etch-dk); border-bottom: 1px solid var(--etch-dk); }
  .tiles-col { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 4px 0 10px; }
  .col-main .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .col-main .tiles-indent > :first-child { grid-column: auto; }
  .col-main .tiles-center { gap: 20px; flex-wrap: wrap; }
  .tile { width: 150px; }
  .sec { font-size: 22px; }
  .tile-label { font-size: 16px; }
  .subwin { border-radius: 0; }
}