/* CTH Clips - styles on top of the shared diagrammer stylesheet (loaded
   first), same CTH greyscale system. Only what Clips adds lives here. */

/* ---------------------------------------------------------- library */
.clib { flex: 1; padding: 22px clamp(16px, 3vw, 40px); background: var(--cloud); overflow-y: auto; }
.clib-title {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--soft); margin: 18px 4px 10px;
}
.clib-title:first-child { margin-top: 0; }
.clib-recents { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.recent-card {
  position: relative; flex-shrink: 0; text-align: left;
  border: 1px solid var(--edge); border-radius: var(--r-md);
  background: var(--cloud); padding: 13px 38px 13px 15px; min-width: 200px;
  box-shadow: var(--shadow-1); transition: box-shadow .15s, border-color .15s;
}
.recent-card:hover { box-shadow: var(--shadow-2); border-color: #cfcfcf; }
.recent-name { display: block; font-weight: 800; font-size: 14px; margin-bottom: 3px; }
.recent-meta { color: var(--mist); font-size: 12px; }
.recent-del {
  position: absolute; top: 8px; right: 8px; color: var(--soft);
  padding: 2px 7px; border-radius: 6px; font-weight: 500;
}
.recent-del:hover { background: rgba(180, 35, 24, .08); color: var(--danger); }

.clib-browser { display: flex; flex-direction: column; gap: 3px; max-width: 760px; }
.clib-row {
  display: flex; align-items: center; gap: 11px; text-align: left;
  border: none; background: none; border-radius: var(--r-sm);
  padding: 10px 12px; color: var(--graphite); font-size: 14px;
}
.clib-row:hover { background: var(--sunken); color: var(--ink); }
.clib-ic { width: 19px; height: 19px; flex-shrink: 0; color: var(--soft); }
.clib-video { font-weight: 500; }
.clib-size { margin-left: auto; color: var(--soft); font-size: 12px; }
.clib-up { color: var(--mist); }
.clib-note { color: var(--mist); padding: 14px 6px; }

.dbx-card {
  max-width: 620px; border: 1px solid var(--edge); border-radius: var(--r-lg);
  padding: 22px 26px; box-shadow: var(--shadow-1);
}
.dbx-card h2 { margin: 0 0 8px; font-size: 18px; }
.dbx-card p, .dbx-card li { color: var(--mist); line-height: 1.55; font-size: 13.5px; }
.dbx-card ol { padding-left: 20px; margin: 8px 0 16px; }
.dbx-card code { background: var(--sunken); border-radius: 5px; padding: 1px 6px; font-size: 12px; }
.dbx-card a { color: var(--ink); }
.dbx-row { display: flex; gap: 10px; flex-wrap: wrap; }
#dbxKey {
  flex: 1; min-width: 200px; height: 38px; padding: 0 12px;
  border: 1px solid var(--edge); border-radius: var(--r-sm); outline: none;
}
#dbxKey:focus { border-color: var(--soft); }

.reopen { max-width: 480px; margin: 10vh auto; text-align: center; padding: 0 20px; }
.reopen h2 { font-size: 20px; }
.reopen p { color: var(--mist); line-height: 1.55; }
.reopen .btn { margin: 6px; }

/* ---------------------------------------------------------- player */
.vp { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.vp-title { flex: 1; min-width: 120px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-main { flex: 1; display: flex; min-height: 0; }
.vp-stagecol { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--cloud); }

.vp-stage { position: relative; flex: 1; min-height: 120px; background: #0b0b0b; }
#vpVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#vpOverlay, .an-frame, .an-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
#vpOverlay { pointer-events: none; }

.an-root { position: absolute; inset: 0; background: #0b0b0b; }
.an-frame { pointer-events: none; }
.an-canvas { touch-action: none; cursor: crosshair; }
.an-tb { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); }
.an-hold { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--graphite); padding: 0 4px; }
.an-hold input { width: 44px; height: 28px; border: 1px solid var(--edge); border-radius: 6px; text-align: center; font: inherit; }
.an-textinput {
  position: absolute; z-index: 6; transform: translate(-4px, -1.1em);
  font-weight: 800; border: 2px solid var(--select); border-radius: 8px;
  background: #fff; padding: 2px 6px; outline: none; min-width: 80px;
}

.vp-transport {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-top: 1px solid var(--edge);
  background: var(--cloud); flex-wrap: wrap;
}
.tbtn {
  width: 36px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--graphite);
}
.tbtn svg { width: 19px; height: 19px; }
.tbtn:hover { background: var(--sunken); color: var(--ink); }
.tbtn-play { background: var(--ink); color: var(--cloud); width: 44px; }
.tbtn-play:hover { background: var(--ink-raised); color: var(--cloud); }
.tbtn-word { width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 800; }
.vp-clock { font-size: 12.5px; color: var(--mist); font-variant-numeric: tabular-nums; margin-left: 6px; }
.vp-hintkeys { margin-left: auto; color: var(--soft); font-size: 11.5px; }

.vp-timeline { width: 100%; height: 66px; display: block; background: var(--cloud); border-top: 1px solid var(--edge-soft); cursor: pointer; touch-action: none; }

.vp-tagbar { padding: 8px 12px 12px; border-top: 1px solid var(--edge-soft); background: var(--cloud); }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag-row:first-child { margin-top: 0; }
.tag-btn {
  position: relative; border: 1px solid var(--edge); border-radius: 9px;
  padding: 7px 12px 7px 20px; background: var(--cloud); font-size: 12.5px; font-weight: 800;
  color: var(--graphite); white-space: nowrap;
}
.tag-btn::before {
  content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--soft));
}
.tag-btn:hover { border-color: #cfcfcf; color: var(--ink); box-shadow: var(--shadow-1); }
.tag-btn-tag { font-weight: 500; }
.tag-btn-tag.on { background: var(--ink); border-color: var(--ink); color: var(--cloud); }
.tag-btn-mode { border-style: dashed; }
.tag-edit { padding-left: 12px; color: var(--soft); font-weight: 500; }
.tag-edit::before { display: none; }
.tag-key { margin-left: 6px; font-size: 9px; font-weight: 800; color: var(--soft); }
.tag-btn-tag.on .tag-key { color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------- clip log */
.vp-log {
  width: 300px; flex-shrink: 0; display: flex; flex-direction: column;
  border-left: 1px solid var(--edge-soft); background: var(--cloud); min-height: 0;
}
.log-head { padding: 12px 12px 8px; border-bottom: 1px solid var(--edge-soft); }
#vpLogSearch {
  width: 100%; height: 32px; padding: 0 10px; font-size: 13px;
  border: 1px solid var(--edge); border-radius: var(--r-sm); outline: none;
}
#vpLogSearch:focus { border-color: var(--soft); }
.log-filters { display: flex; gap: 6px; margin-top: 7px; }
.log-filters select {
  flex: 1; min-width: 0; height: 28px; font: inherit; font-size: 12px;
  border: 1px solid var(--edge); border-radius: 7px; background: var(--cloud); color: var(--graphite);
}
.log-count { color: var(--soft); font-size: 11px; margin-top: 6px; }
.log-list { flex: 1; overflow-y: auto; padding: 6px; }
.log-row {
  position: relative; display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: 9px; cursor: pointer;
}
.log-row:hover { background: var(--sunken); }
.log-row.on { background: var(--sunken); box-shadow: inset 0 0 0 1.5px var(--select); }
.log-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.log-main { flex: 1; min-width: 0; }
.log-name { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-meta { font-size: 11.5px; color: var(--mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-acts { display: none; gap: 2px; }
.log-row:hover .log-acts { display: inline-flex; }
.log-empty { color: var(--mist); font-size: 13px; line-height: 1.5; padding: 16px 12px; }

/* panel editor */
.pe-title { font-weight: 800; font-size: 13px; margin: 16px 0 6px; }
.pe-cols { color: var(--soft); font-weight: 500; font-size: 11px; margin-left: 8px; }
.pe-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.pe-row input { border: 1px solid var(--edge); border-radius: 7px; height: 30px; font: inherit; font-size: 13px; padding: 0 8px; }
.pe-color { width: 34px; padding: 2px !important; }
.pe-label { flex: 1; min-width: 0; }
.pe-key { width: 44px; text-align: center; }
.pe-num { width: 56px; }
.pe-spacer { width: 118px; }

/* email sheet */
.em-groups { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
#emTo { width: 100%; height: 34px; border: 1px solid var(--edge); border-radius: var(--r-sm); padding: 0 10px; font: inherit; outline: none; }
#emTo:focus { border-color: var(--soft); }
.em-list { max-height: 34vh; overflow-y: auto; }
.em-time { margin-left: auto; color: var(--soft); font-size: 12px; }
.em-note { color: var(--soft); font-size: 12px; margin: 10px 0 0; }

/* ---------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .vp-log {
    position: fixed; right: 0; top: 0; bottom: 0; z-index: 30;
    width: min(320px, 88vw); box-shadow: var(--shadow-3);
    transform: translateX(100%); transition: transform .18s;
  }
  .vp.log-open .vp-log { transform: none; }
  .vp-hintkeys { display: none; }
}
@media (min-width: 901px) {
  .vp-log { display: flex; }
  .vp.log-open .vp-log { display: none; }
}
@media (max-width: 560px) {
  .vp-tagbar { overflow-x: auto; }
  .tag-row { flex-wrap: nowrap; }
  .vp-transport { gap: 3px; }
}