/* Sidebar adapted from sidebar.html, using Drawer typography. */
:root {
  --workspace-sidebar: #16161a;
  --workspace-canvas: #0b0b0c;
}

.main-panel,
.idea-view,
.card-panel { background-color: var(--workspace-canvas); }

.universe-view {
  background: radial-gradient(ellipse at 50% 40%, #111418 0%, var(--workspace-canvas) 70%);
}

.list-panel {
  width:320px;
  position:relative;
  border:0;
  background:
    radial-gradient(600px 310px at 28% -10%,rgba(242,169,59,.055),transparent 61%),
    var(--workspace-sidebar);
  box-shadow:12px 0 36px rgba(0,0,0,.18);
  overflow:hidden;
}
.list-panel::after {
  content:''; position:absolute; top:0; right:0; width:1px; height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  pointer-events:none;
}
.list-hdr { padding:26px 22px 8px; border:0; }
.app-label {
  margin-bottom:13px; color:rgba(243,239,231,.28);
  font:700 10px/1 'Space Mono',monospace; letter-spacing:.32em;
}
.app-title {
  color:#f3efe9; font:700 29px/1.25 'Noto Serif SC',serif; letter-spacing:.01em;
}
.app-title span { color:var(--card-orange); }
.app-tagline {
  margin-top:9px; color:rgba(243,239,231,.38);
  font:400 12px/1.7 'Noto Serif SC',serif; letter-spacing:0;
}

.new-btn {
  width:100%; min-height:48px; margin-top:19px; padding:0 15px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:13px; background:#1f2023; color:#f0aa4e;
  box-shadow:none; font:600 13px/1 'Noto Serif SC',serif; letter-spacing:.02em; text-transform:none;
}
.new-btn:hover { border:0; background:#2a1f14; color:#f2b461; box-shadow:0 0 24px rgba(242,169,59,.13); }
.sidebar-plus { font:400 18px/1 'Space Mono',monospace; }

.universe-btn,
.universe-btn.active {
  position:relative;
  width:100%; min-height:42px; margin-top:11px; padding:0 12px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:11px; background:transparent; color:rgba(243,239,231,.6);
  font:500 13px/1 'Noto Serif SC',serif; letter-spacing:0;
  transition:background .2s,color .2s,box-shadow .24s,transform .2s;
}
.universe-btn:hover,.universe-btn.active {
  border:0;
  background:#202024;
  color:var(--card-text);
  box-shadow:0 0 26px rgba(242,169,59,.10),0 10px 28px rgba(0,0,0,.16);
}
.universe-btn:hover .sidebar-universe-star {
  color:#f4b34f;
  text-shadow:0 0 14px rgba(242,169,59,.55);
}
.sidebar-universe-star { color:var(--card-orange); font-size:14px; }
.sidebar-nav-arrow { position:absolute; right:16px; margin-left:0; color:rgba(243,239,231,.27); font-family:'Space Mono',monospace; }

.sidebar-divider { flex:none; height:1px; margin:15px 22px 9px; background:rgba(255,255,255,.055); }
.sidebar-list-label {
  flex:none; padding:0 22px 7px; color:rgba(243,239,231,.28);
  font:700 10px/1.2 'Space Mono',monospace; letter-spacing:.11em; text-transform:uppercase;
}
.sidebar-list-label span,.sidebar-list-label b { font-weight:400; }

.ideas-list { flex:1; padding:3px 12px 10px; overflow-y:auto; }
.ideas-list::-webkit-scrollbar { width:3px; }
.ideas-list::-webkit-scrollbar-thumb { border-radius:999px; background:rgba(255,255,255,.09); }
.idea-item {
  position:relative; margin:0 0 3px; padding:13px 14px 12px;
  border:0; border-left:0; border-radius:13px; background:transparent;
  opacity:1; transition:background .16s,opacity .16s,transform .16s;
}
.idea-item:hover { border:0; background:#18191b; transform:translateY(-1px); }
.idea-item.active {
  border:0; border-left:0; background:#232428;
  box-shadow:0 7px 22px rgba(0,0,0,.27);
}
.idea-item.active::before {
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  border-radius:0 3px 3px 0; background:var(--card-orange);
  box-shadow:0 0 12px rgba(242,169,59,.6);
}
.idea-item.dusty { opacity:.72; }
.idea-item.dormant { opacity:.48; }
.idea-item.dusty:hover,.idea-item.dormant:hover,.idea-item.active { opacity:1; }
.idea-item-name {
  margin:0; color:#ede9e3; font:700 14px/1.42 'Noto Serif SC',serif;
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.idea-item.dormant .idea-item-name { color:rgba(243,239,231,.56); font-style:normal; font-weight:600; }
.idea-item-snippet {
  margin-top:5px; color:rgba(243,239,231,.34); font:400 11px/1.5 'Noto Serif SC',serif;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.idea-item-meta { display:flex; align-items:center; gap:9px; margin-top:9px; }
.idea-status-badge {
  min-height:23px; padding:0 9px; display:inline-flex; align-items:center; gap:6px;
  border:0; border-radius:999px; background:#1f2023;
  font:600 10px/1 'Noto Serif SC',serif;
}
.idea-status-badge .sdot { width:6px; height:6px; border-radius:50%; }
.idea-status-badge.s-grow { background:rgba(242,169,59,.12); color:#efa94d; }
.idea-status-badge.s-grow .sdot { box-shadow:0 0 7px rgba(242,169,59,.7); }
.idea-status-badge.s-seed { background:rgba(87,196,201,.11); color:#68b9bd; }
.idea-status-badge.s-pause { background:#1f2023; color:rgba(243,239,231,.34); }
.idea-status-badge.s-supernova { background:rgba(105,170,207,.12); color:#82bcd8; }
.idea-item-info {
  color:rgba(243,239,231,.25); font:400 9px/1 'Space Mono',monospace; letter-spacing:.01em;
}

.idea-item-controls {
  display:flex; justify-content:flex-end; gap:4px; max-height:0; margin-top:0; opacity:0; overflow:hidden;
  transition:max-height .2s,opacity .2s,margin .2s;
}
.idea-item.active .idea-item-controls,.idea-item:hover .idea-item-controls {
  max-height:38px; margin-top:8px; opacity:1;
}
.list-del-btn {
  width:29px; height:29px; margin:0; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:transparent; color:rgba(243,239,231,.34);
}
.list-del-btn .ui-icon { width:13px; height:13px; }
.list-del-btn:hover { border:0; background:#1f2023; color:var(--card-text); }
.list-del-btn.danger:hover { color:#df766b; }

.bottom-sec { flex:none; padding:0; border:0; border-top:1px solid rgba(255,255,255,.055); background:transparent; }
.settings-link {
  width:100%; min-height:51px; padding:0 22px; display:flex; align-items:center;
  border:0; background:transparent; color:rgba(243,239,231,.38);
  font:400 10px/1 'Space Mono',monospace; letter-spacing:.04em;
}
.settings-link:hover { color:var(--card-text); background:#151618; }

@media (max-width:768px) {
  body .list-panel {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:220;
    width:min(88vw,320px);
    background:#0e0f10;
  }
  body .list-hdr { padding:24px 20px 8px; }
  body .app-title { font-size:27px; }
  body .ideas-list { padding-left:10px; padding-right:10px; }
}