Upload 4 files

assets/css/codebook.css

@@ -1,320 +1,73 @@
 /* ============================================
-   Codebook Specific Styles
+   Category Page Fixes
+   (centers representative video & removes empty space)
    ============================================ */
 
-body {
+body.category-page {
     padding: 20px;
 }
 
-.app {
+/* Use the same "app card" look, but single-column and roomy */
+.category-app {
+    grid-template-columns: 1fr !important;
     max-width: 1200px;
-    display: grid;
-    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
-    gap: 0;
-    background: linear-gradient(145deg, #020617, #020617);
-    border-radius: 24px;
-    border: 1px solid var(--border);
-    box-shadow: var(--shadow-soft);
-    overflow: hidden;
-    padding: 0;
-}
-
-@media (max-width: 900px) {
-    .app {
-        grid-template-columns: 1fr;
-    }
-}
-
-.sidebar {
-    border-right: 1px solid var(--border);
-    background: radial-gradient(circle at top left, #020617 0, #030712 60%);
-    padding: 18px 18px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 14px;
-}
-
-@media (max-width: 900px) {
-    .sidebar {
-        border-right: none;
-        border-bottom: 1px solid var(--border);
-    }
 }
 
-.app-title {
+/* Representative segment area: center content */
+body.category-page .video-wrapper {
     display: flex;
+    justify-content: center;
     align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-}
-
-.app-title h1 {
-    font-size: 18px;
-    letter-spacing: 0.02em;
-    margin: 0;
-}
-
-.app-title span {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 4px 10px;
-    border-radius: 999px;
-    background: var(--accent-soft);
-    color: var(--accent);
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.09em;
-}
-
-.nav-links {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-
-.search-box {
-    position: relative;
-}
-
-.search-box input {
-    padding: 8px 30px 8px 12px;
-    font-size: 13px;
+    padding: 16px;
 }
 
-.search-icon {
-    position: absolute;
-    right: 9px;
-    top: 50%;
-    transform: translateY(-50%);
-    font-size: 13px;
-    color: var(--text-muted);
-}
-
-.category-list {
-    margin-top: 8px;
-    padding: 0;
-    list-style: none;
-    overflow-y: auto;
-    min-height: 0;
-    flex: 1;
-}
-
-.category-item {
-    border-radius: var(--radius-sm);
-    padding: 8px 10px;
-    margin-bottom: 4px;
-    cursor: pointer;
-    border: 1px solid transparent;
-    transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-}
-
-.category-item:hover {
-    background: rgba(15, 23, 42, 0.9);
-    border-color: #1e293b;
-    transform: translateY(-1px);
-}
-
-.category-item.active {
-    background: var(--accent-soft);
-    border-color: var(--accent);
-}
-
-.cat-name {
-    font-size: 13px;
-    font-weight: 600;
-}
-
-.cat-family {
-    font-size: 11px;
-    color: var(--text-muted);
-}
-
-.cat-meta {
-    margin-top: 2px;
-    font-size: 10px;
-    color: var(--text-muted);
-    display: flex;
-    justify-content: flex-end;
+/* Make the representative grid behave like a centered single card */
+body.category-page .video-wrapper .video-grid {
     width: 100%;
-    text-align: right;
-}
-
-.main {
-    padding: 18px 20px 16px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-}
-
-.header-row h2 {
-    margin: 0;
-    font-size: 18px;
-}
-
-.tag-row {
-    display: flex;
-    gap: 6px;
-    flex-wrap: wrap;
-}
-
-.tag {
-    font-size: 10px;
-    padding: 3px 8px;
-    border-radius: 999px;
-    background: #020617;
-    border: 1px solid var(--border);
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-}
-
-.tag.kind-safety {
-    border-color: #f97316;
-    color: #fed7aa;
-}
-
-.tag.kind-timing {
-    border-color: #22c55e;
-    color: #bbf7d0;
-}
-
-.tag.kind-effort {
-    border-color: #eab308;
-    color: #fef3c7;
-}
-
-.tag.kind-lowlevel {
-    border-color: #a855f7;
-    color: #e9d5ff;
-}
-
-.definition-card,
-.temporal-card,
-.video-card {
-    padding: 14px 14px 12px;
-}
-
-.definition-card p {
-    margin: 0 0 6px;
-    font-size: 13px;
-    line-height: 1.5;
-}
-
-.subheading {
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.12em;
-    color: var(--text-muted);
-    margin-bottom: 4px;
-}
-
-.bullet-list {
-    margin: 3px 0 0;
-    padding-left: 16px;
-    font-size: 12px;
-    color: var(--text-muted);
-}
-
-.temporal-grid {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 10px;
-}
-
-@media (max-width: 600px) {
-    .temporal-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-.temporal-block {
-    border-radius: 12px;
-    background: rgba(15, 23, 42, 0.9);
-    border: 1px solid var(--border);
-    padding: 8px 10px;
-    font-size: 12px;
-}
-
-.temporal-block strong {
-    display: block;
-    font-size: 11px;
-    text-transform: uppercase;
-    letter-spacing: 0.13em;
-    color: var(--text-muted);
-    margin-bottom: 2px;
-}
-
-.video-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 6px;
+    justify-content: center;
+    /* centers the column */
+    grid-template-columns: minmax(320px, 760px);
+    gap: 14px;
 }
 
-.video-header span {
-    font-size: 11px;
-    color: var(--text-muted);
+/* Video card should not stretch weirdly */
+body.category-page .video-item {
+    width: 100%;
+    max-width: 760px;
 }
 
-.video-wrapper {
-    position: relative;
+/* Let the representative video be larger and consistent */
+body.category-page .video-item video {
+    width: 100%;
+    max-height: 420px;
+    object-fit: contain;
+    /* prevents aggressive crop */
     border-radius: 14px;
-    background: #020617;
-    border: 1px solid var(--border);
-    padding: 12px;
 }
 
-.video-grid {
-    display: grid;
-    gap: 12px;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+/* Tighten spacing between sections so it feels less "floating" */
+body.category-page .card {
+    margin-top: 0;
 }
 
-.video-item {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.video-item video {
+/* Make the table area feel aligned */
+body.category-page .table-card {
     width: 100%;
-    border-radius: 12px;
-    border: 1px solid var(--border);
-    background: #000;
-    max-height: 240px;
-    object-fit: cover;
+    overflow-x: auto;
 }
 
-.video-label {
-    font-size: 11px;
-    color: var(--text-muted);
-    text-align: center;
-}
-
-.empty-video {
-    padding: 26px 14px;
-    text-align: center;
-    font-size: 13px;
-    color: var(--text-muted);
-}
+/* On small screens, just go full width */
+@media (max-width: 700px) {
+    body.category-page .video-wrapper .video-grid {
+        grid-template-columns: 1fr;
+    }
 
-.hint {
-    font-size: 11px;
-    color: var(--text-muted);
-    margin-top: 6px;
-}
+    body.category-page .video-item {
+        max-width: none;
+    }
 
-.kbd {
-    display: inline-block;
-    border-radius: 4px;
-    border: 1px solid var(--border);
-    padding: 1px 5px;
-    font-size: 10px;
-    background: #020617;
-    margin: 0 1px;
+    body.category-page .video-item video {
+        max-height: 320px;
+    }
 }