/* Hallmark · macrostructure: app-shell · nav: top-bar · footer: Ft1 * genre: modern-minimal · theme: Quiet · accent: cool indigo * contrast: pass (46–50) · type: sans-only (Inter) + Mono for data * * Quiet — Linear/Stripe/Vercel school. No serif display, no italic emphasis * in headings, no decorative dividers (◇), tight spacing, single accent, * subtle shadows, hairline borders. */ @import url("./tokens.css"); /* ============================================================ Reset */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--paper-1); color: var(--ink-1); font-size: var(--t-base); line-height: 1.55; font-feature-settings: "ss01", "cv11", "tnum"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html, body { overflow-x: clip; } img, svg { max-width: 100%; display: block; } button { font-family: inherit; } a { color: var(--ink-1); text-decoration: none; } a:hover { color: var(--accent); } .muted { color: var(--ink-3); } .muted-deep { color: var(--ink-2); } .small { font-size: var(--t-sm); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; } /* ============================================================ App shell — sidebar + main */ .app-shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns var(--dur-base) var(--ease); } /* Body IS the .app-shell element (class on ), so the collapse rule targets body itself — NOT a `.app-shell` descendant of body. */ body.sb-collapsed { grid-template-columns: 56px minmax(0, 1fr); } .app-main { min-width: 0; display: flex; flex-direction: column; } /* ============================================================ Sidebar (BNI brand) */ .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); background: var(--surface); border-right: var(--rule); z-index: 20; } .sb-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); } .sb-brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink-1); padding: 0 var(--sp-1); flex: 1; min-width: 0; } .sb-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); flex-shrink: 0; } .sb-toggle:hover { color: var(--ink-1); border-color: var(--line-2); background: var(--paper-2); } body.sb-collapsed .sb-toggle-collapse { display: none; } body.sb-collapsed .sb-toggle-expand { display: block !important; } .sb-brand:hover { color: var(--ink-1); } .sb-logo { height: 28px; width: auto; display: block; } .sb-mark { font-family: var(--font-sans); font-weight: 500; font-size: 0.9rem; letter-spacing: -.01em; color: var(--ink-3); } .sb-badge { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-3); padding: var(--sp-1) var(--sp-3); background: var(--paper-2); border-radius: var(--r-pill); margin-bottom: var(--sp-4); align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--s-pos-1); box-shadow: 0 0 0 3px color-mix(in oklab, var(--s-pos-1) 22%, transparent); flex-shrink: 0; } .sb-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sb-nav a { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-3); font-size: var(--t-sm); transition: background var(--dur-fast), color var(--dur-fast); } .sb-nav a:hover { color: var(--ink-1); background: var(--paper-2); } .sb-nav a.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; } .sb-ico { display: inline-block; width: 16px; text-align: center; font-family: var(--font-mono); font-size: 13px; color: currentColor; opacity: .8; } .sb-refresh-form { margin: 0; } .sb-refresh { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--accent); color: white; border: 1px solid var(--accent); padding: var(--sp-2) var(--sp-3); font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; border-radius: var(--r-3); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); } .sb-refresh:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .sb-refresh-ico { font-family: var(--font-mono); font-size: 13px; } /* Collapsed app sidebar — icons-only mode */ body.sb-collapsed .sidebar { padding: var(--sp-4) var(--sp-2); } body.sb-collapsed .sb-brand { padding: 0; } body.sb-collapsed .sb-logo { height: 22px; } body.sb-collapsed .sb-badge { display: none; } body.sb-collapsed .sb-nav a { justify-content: center; padding: var(--sp-2); gap: 0; font-size: 0; /* hide text */ } body.sb-collapsed .sb-nav .sb-ico { font-size: 14px; } body.sb-collapsed .sb-refresh { justify-content: center; padding: var(--sp-2); } body.sb-collapsed .sb-refresh-label { display: none; } /* ---- Mobile: collapse sidebar to top bar ---- */ @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: sticky; top: 0; height: auto; width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); border-right: none; border-bottom: var(--rule); backdrop-filter: saturate(180%) blur(6px); } .sb-brand { margin-bottom: 0; } .sb-badge { margin-bottom: 0; order: 3; flex-basis: auto; } .sb-nav { flex-direction: row; flex-wrap: wrap; gap: 2px; flex: 1; order: 4; width: 100%; margin-top: var(--sp-2); } .sb-nav a { padding: var(--sp-1) var(--sp-3); font-size: var(--t-xs); } .sb-refresh-form { margin-left: auto; order: 2; } .sb-refresh { width: auto; padding: var(--sp-2) var(--sp-3); } .sb-refresh span:first-child { display: none; } } /* ============================================================ Page shell */ .page { max-width: var(--measure-page); margin: 0 auto; padding: var(--sp-7) var(--sp-6) var(--sp-9); } .page-wide { max-width: var(--measure-wide); } .page-prose { max-width: var(--measure-tight); } /* ============================================================ Headings */ h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; color: var(--ink-1); letter-spacing: -.012em; line-height: 1.25; margin: 0; } h1 { font-size: var(--t-2xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); } h4 { font-size: var(--t-md); font-weight: 600; } .eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 500; margin: 0 0 var(--sp-3); } .column-head { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600; color: var(--ink-1); letter-spacing: -.005em; padding-bottom: var(--sp-2); margin: 0 0 var(--sp-3); border-bottom: var(--rule); } .column-head em { font-style: normal; font-weight: 400; color: var(--ink-3); margin-left: var(--sp-1); } /* ============================================================ Dashboard lead */ .dash-lead { margin: 0 0 var(--sp-6); } .lead-context { display: block; font-size: var(--t-xs); letter-spacing: .04em; color: var(--ink-3); margin-bottom: var(--sp-2); } .lead-h1 { font-family: var(--font-sans); font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); letter-spacing: -.018em; line-height: 1.2; margin: 0; color: var(--ink-1); max-width: 42rem; } .lead-h1 em { font-style: normal; font-weight: 600; color: var(--accent); } /* Replace ◇ diamond separator with simple spacing — kept as no-op for templates */ .diamond-row { margin: var(--sp-7) 0; } .diamond-row::before, .diamond-row::after { display: none; } .diamond-row span { display: none; } /* ============================================================ Specimen — SaaS card */ .specimen { margin: 0 auto var(--sp-6); } .specimen-frame { border: 1px solid var(--line-1); background: var(--surface); border-radius: var(--r-4); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base); } .specimen-frame:hover { box-shadow: var(--shadow-2); } .specimen-head { background: var(--paper-2); border-bottom: var(--rule); padding: var(--sp-2) var(--sp-4); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); } .specimen-id { color: var(--ink-2); font-weight: 500; } .specimen-body { padding: var(--sp-5) var(--sp-5); } .specimen-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-3); align-items: center; margin-bottom: var(--sp-3); } .specimen-author, .specimen-time { color: var(--ink-3); } .specimen-title { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-lg); letter-spacing: -.012em; line-height: 1.35; margin: var(--sp-2) 0 var(--sp-3); } .specimen-title a { color: var(--ink-1); } .specimen-title a:hover { color: var(--accent); } .specimen-summary { margin: 0; color: var(--ink-2); font-size: var(--t-base); line-height: 1.6; max-width: 52ch; } .specimen-foot { background: var(--paper-2); border-top: var(--rule); padding: var(--sp-2) var(--sp-4); font-size: var(--t-xs); color: var(--ink-3); display: flex; align-items: center; gap: var(--sp-3); } .specimen-flex { color: var(--ink-3); } .specimen-url { color: var(--accent); font-family: var(--font-mono); font-size: 11px; flex: 1; } .specimen-url:hover { text-decoration: underline; } /* ============================================================ Proof row — SaaS stat cards */ .proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-6) 0; } .proof-cell { padding: var(--sp-5); background: var(--surface); border: var(--rule); border-radius: var(--r-4); display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; transition: border-color var(--dur-fast); } .proof-cell:hover { border-color: var(--line-2); } .proof-num { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-stat); letter-spacing: -.025em; line-height: 1; color: var(--ink-1); font-variant-numeric: tabular-nums; } .proof-num.is-neg { color: var(--s-neg-1); } .proof-label { font-size: var(--t-xs); letter-spacing: 0; text-transform: none; color: var(--ink-2); font-family: var(--font-sans); font-weight: 500; } .proof-sub { font-size: var(--t-xs); letter-spacing: 0; color: var(--ink-3); font-family: var(--font-sans); } @media (max-width: 760px) { .proof { grid-template-columns: 1fr; } } /* ============================================================ Filter bar — Linear-style flat inline */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-3) 0; margin: 0 0 var(--sp-6); border-bottom: var(--rule); /* No card. No shadow. Filter row, not a form. */ } .filter-group { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; } .filter-label { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-right: var(--sp-1); } .filter-pill { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line-1); border-radius: var(--r-pill); background: var(--paper-1); color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); user-select: none; } .filter-pill:hover { border-color: var(--line-2); color: var(--ink-1); } .filter-pill input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .filter-pill.is-on { background: var(--ink-1); color: var(--surface); border-color: var(--ink-1); } /* Semantic-tinted active states for sentiment filter pills */ .filter-pill--neg.is-on { background: var(--s-neg-2); border-color: var(--s-neg-2); } .filter-pill--neu.is-on { background: var(--ink-2); border-color: var(--ink-2); } .filter-pill--pos.is-on { background: var(--s-pos-1); border-color: var(--s-pos-1); } .filter-select { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line-1); border-radius: var(--r-3); background: var(--surface); color: var(--ink-1); font-family: var(--font-sans); font-size: var(--t-sm); cursor: pointer; transition: border-color var(--dur-fast); min-width: 10rem; } .filter-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .filter-actions { display: inline-flex; gap: var(--sp-3); align-items: center; margin-left: auto; } .filter-apply { padding: var(--sp-1) var(--sp-4); font-size: var(--t-sm); } .filter-reset-link { font-size: var(--t-sm); color: var(--ink-3); text-decoration: none; border-bottom: 1px dashed var(--line-2); padding-bottom: 1px; } .filter-reset-link:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Hide Apply when JS available — auto-submit handles it. JS sets data-js on . */ html[data-js] .filter-apply { display: none; } @media (max-width: 760px) { .filter-bar { padding: var(--sp-3); gap: var(--sp-3); } .filter-actions { margin-left: 0; width: 100%; } } /* ============================================================ Charts — unframed, breathe via whitespace */ /* Section that holds a chart. No card. Hairline divider via column-head. */ .chart-block { margin: var(--sp-7) 0 0; } .chart-block svg { display: block; width: 100%; height: auto; max-width: 100%; margin-top: var(--sp-3); } /* Density-mixed pair: two charts/blocks side by side, narrower than dash-grid */ .chart-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6) var(--sp-7); margin-top: var(--sp-7); } @media (max-width: 760px) { .chart-pair { grid-template-columns: 1fr; gap: var(--sp-5); } } /* Slim full-width strip — used for heatmap (low height, high width) */ .chart-strip { margin: var(--sp-7) 0 0; } .chart-strip svg { display: block; width: 100%; height: auto; margin-top: var(--sp-3); } .chart-caption { margin-top: var(--sp-3); font-size: var(--t-xs); color: var(--ink-3); max-width: 56ch; } /* ============================================================ Sentiment ribbon */ .sentiment-bar { display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-3); } .sent-seg { height: 100%; } .sent-seg.sangat-positif { background: var(--s-pos-2); } .sent-seg.positif { background: var(--s-pos-1); } .sent-seg.netral { background: var(--s-neu); } .sent-seg.negatif { background: var(--s-neg-1); } .sent-seg.sangat-negatif { background: var(--s-neg-2); } .sentiment-legend { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2) var(--sp-3); font-size: var(--t-xs); color: var(--ink-2); } .sentiment-legend li { display: flex; align-items: center; gap: var(--sp-2); font-variant-numeric: tabular-nums; } .sentiment-legend .dot { width: 8px; height: 8px; display: inline-block; flex-shrink: 0; border-radius: 50%; } .sentiment-legend .dot.sangat-positif { background: var(--s-pos-2); } .sentiment-legend .dot.positif { background: var(--s-pos-1); } .sentiment-legend .dot.netral { background: var(--s-neu); } .sentiment-legend .dot.negatif { background: var(--s-neg-1); } .sentiment-legend .dot.sangat-negatif { background: var(--s-neg-2); } .sentiment-legend b { color: var(--ink-1); font-weight: 600; } .sentiment-legend .pct { color: var(--ink-3); font-family: var(--font-mono); font-size: 10px; } /* ============================================================ Dashboard 2-col grid */ .dash-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-6); margin-top: var(--sp-6); } .rank { list-style: none; margin: 0; padding: 0; } .rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--sp-2) 0; border-bottom: var(--rule); gap: var(--sp-3); font-size: var(--t-sm); } .rank li:last-child { border-bottom: none; } .rank .name { color: var(--ink-1); } .rank .name em { color: var(--ink-3); font-style: normal; font-family: var(--font-mono); font-size: 10px; } .rank .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-1); font-size: var(--t-sm); } /* ============================================================ Timeline mini bar */ .timeline { display: flex; align-items: flex-end; gap: 2px; height: 72px; margin-top: var(--sp-3); padding: 0; border-bottom: var(--rule); position: relative; padding-bottom: var(--sp-2); } .timeline-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 1px; border-radius: var(--r-1); overflow: hidden; } .timeline .bar { width: 100%; } .timeline .bar-news { background: var(--cool); } .timeline .bar-x { background: var(--src-x); } .timeline-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: var(--sp-2); } .timeline-legend { display: flex; gap: var(--sp-4); font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--sp-3); } .timeline-legend .swatch { width: 10px; height: 10px; display: inline-block; margin-right: var(--sp-1); vertical-align: -1px; border-radius: 2px; } .timeline-legend .swatch.news { background: var(--cool); } .timeline-legend .swatch.x { background: var(--src-x); } /* ============================================================ Feed list */ .feed-list { list-style: none; padding: 0; margin: var(--sp-3) 0 0; } .feed-list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--rule); align-items: baseline; } .feed-list li:last-child { border-bottom: none; } .feed-time { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); } .feed-title { font-size: var(--t-sm); font-weight: 500; color: var(--ink-1); margin: 0; line-height: 1.4; } .feed-title a { color: inherit; } .feed-title a:hover { color: var(--accent); } .feed-meta { margin-top: var(--sp-1); display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-3); align-items: center; } /* ============================================================ Tags — SaaS subtle pills */ .tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 1px var(--sp-2); font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-2); border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--paper-2); white-space: nowrap; } .tag-source-news { color: var(--cool); border-color: color-mix(in oklab, var(--cool) 25%, var(--line-1)); background: var(--cool-soft); } .tag-source-x { color: var(--src-x); border-color: color-mix(in oklab, var(--src-x) 25%, var(--line-1)); background: color-mix(in oklab, var(--src-x) 8%, var(--surface)); } .tag-cat { color: var(--ink-2); background: var(--paper-2); border-color: var(--line-1); } .tag-sent.sangat-positif { color: var(--s-pos-2); background: color-mix(in oklab, var(--s-pos-2) 10%, var(--surface)); border-color: color-mix(in oklab, var(--s-pos-2) 30%, var(--line-1)); } .tag-sent.positif { color: var(--s-pos-1); background: color-mix(in oklab, var(--s-pos-1) 10%, var(--surface)); border-color: color-mix(in oklab, var(--s-pos-1) 30%, var(--line-1)); } .tag-sent.netral { color: var(--ink-3); background: var(--paper-2); border-color: var(--line-1); } .tag-sent.negatif { color: var(--s-neg-1); background: color-mix(in oklab, var(--s-neg-1) 10%, var(--surface)); border-color: color-mix(in oklab, var(--s-neg-1) 30%, var(--line-1)); } .tag-sent.sangat-negatif { color: var(--s-neg-2); background: color-mix(in oklab, var(--s-neg-2) 10%, var(--surface)); border-color: color-mix(in oklab, var(--s-neg-2) 30%, var(--line-1)); } /* ============================================================ Buttons */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); background: var(--ink-1); color: var(--surface); border: 1px solid var(--ink-1); font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; border-radius: var(--r-3); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); text-decoration: none; } .btn:hover { background: var(--accent); border-color: var(--accent); color: white; } .btn-ghost { background: transparent; color: var(--ink-1); border-color: var(--line-2); } .btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-1); color: var(--ink-1); } .btn-primary { background: var(--accent); border-color: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: white; } /* ============================================================ Articles list */ .dash-headline { margin-bottom: var(--sp-6); } .dash-headline h1 { font-size: var(--t-2xl); font-style: normal; font-weight: 600; } .article-feed { list-style: none; padding: 0; margin: var(--sp-4) 0 0; } .article-feed > li { padding: var(--sp-4) 0; border-bottom: var(--rule); display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-4); align-items: baseline; } .article-feed > li:last-child { border-bottom: none; } .article-feed .a-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .article-feed h3 { font-family: var(--font-sans); font-size: var(--t-md); font-weight: 600; letter-spacing: -.008em; line-height: 1.35; margin: var(--sp-1) 0; } .article-feed h3 a { color: var(--ink-1); } .article-feed h3 a:hover { color: var(--accent); } .article-feed .a-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-3); } .article-feed .a-summary { margin: var(--sp-2) 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; max-width: 56ch; } .article-feed .a-url { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); } .article-feed .a-url a { color: var(--ink-3); } .article-feed .a-url a:hover { color: var(--accent); } .feed-controls { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; padding: var(--sp-3) 0; border-bottom: var(--rule); } .feed-controls input, .feed-controls select { padding: var(--sp-2) var(--sp-3); border: var(--rule); border-radius: var(--r-3); font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-1); background: var(--surface); transition: border-color var(--dur-fast); } .feed-controls input:focus, .feed-controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* ============================================================ Article detail */ .doc { max-width: var(--measure-tight); margin: 0 auto; } .doc-eyebrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-3); border-bottom: var(--rule); padding-bottom: var(--sp-3); margin-bottom: var(--sp-5); align-items: center; } .doc h1 { font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.125rem); letter-spacing: -.022em; margin: 0 0 var(--sp-3); line-height: 1.2; } .doc-source-link { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); word-break: break-all; display: inline-block; margin-bottom: var(--sp-5); } .doc-section { margin: var(--sp-6) 0; padding-top: var(--sp-4); border-top: var(--rule); } .doc-section h2 { font-size: var(--t-sm); font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 0 0 var(--sp-3); } .doc-body { color: var(--ink-1); font-size: var(--t-md); line-height: 1.7; } /* ============================================================ Article detail — split layout (prose | aside) */ .doc-split { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--sp-8); max-width: var(--measure-wide); margin: 0 auto; } .doc-split .doc-main { min-width: 0; max-width: var(--measure-tight); } .doc-banner { grid-column: 1 / -1; margin-bottom: 0; } @media (max-width: 900px) { .doc-split { grid-template-columns: 1fr; gap: var(--sp-6); } .doc-split .doc-main { max-width: 100%; } } /* Aside — dense, hairline-divided blocks, no card chrome */ .doc-aside { display: flex; flex-direction: column; gap: var(--sp-6); font-size: var(--t-sm); color: var(--ink-2); align-self: start; position: sticky; top: calc(60px + var(--sp-4)); max-height: calc(100vh - 80px); overflow-y: auto; padding-right: var(--sp-2); } @media (max-width: 900px) { .doc-aside { position: static; max-height: none; overflow: visible; padding-right: 0; } } .aside-block { padding-bottom: var(--sp-5); border-bottom: var(--rule); } .aside-block:last-child { border-bottom: none; padding-bottom: 0; } .aside-head { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--sp-3); } .aside-head em { font-style: normal; font-weight: 500; color: var(--ink-3); } .aside-target { font-size: 10px; color: var(--ink-2); font-weight: 500; } /* Numbered action list — hanging numerals, editorial style. No colored bars. */ .action-numbered { list-style: none; margin: 0; padding: 0; counter-reset: action; display: flex; flex-direction: column; gap: var(--sp-4); } .action-numbered > li { counter-increment: action; position: relative; padding-left: 1.75rem; } .action-numbered > li::before { content: counter(action, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .04em; line-height: 1.5; } .action-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); flex-wrap: wrap; } .action-who { font-weight: 600; font-size: var(--t-sm); color: var(--ink-1); } .action-meta { font-size: 10px; color: var(--ink-3); letter-spacing: .03em; } .action-what { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; } /* Entity inline run — comma-and-dot separated, kind as superscript mono. No chip pile, no decorative pills. Reads like an annotated sentence. */ .entity-run { margin: 0; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-2); } .entity-item { display: inline; white-space: nowrap; border-bottom: 1px dotted var(--line-2); } .entity-name { color: var(--ink-1); font-weight: 500; } .entity-kind { font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-left: 2px; vertical-align: super; line-height: 0; } .entity-sep { margin: 0 var(--sp-2); color: var(--ink-3); } .entity-orang .entity-name { color: var(--accent); } .entity-lembaga .entity-name { color: var(--cool); } .entity-produk .entity-name { color: var(--s-pos-2); } .entity-regulasi .entity-name { color: var(--src-x); } .entity-lokasi .entity-name, .entity-peristiwa .entity-name { color: var(--ink-1); } /* Aside data dl — dense mono grid */ .aside-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); font-size: 11px; color: var(--ink-2); } .aside-stats > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .aside-stats dt { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); } .aside-stats dd { margin: 0; font-weight: 500; color: var(--ink-1); font-variant-numeric: tabular-nums; } /* Aside list — generic dense list for riwayat + cluster */ .aside-list { list-style: none; margin: 0; padding: 0; } .aside-list li { display: grid; grid-template-columns: auto auto 1fr; gap: var(--sp-2); align-items: baseline; padding: var(--sp-2) 0; border-bottom: var(--rule); font-size: var(--t-xs); line-height: 1.45; } .aside-list li:last-child { border-bottom: none; } .aside-list a { color: var(--ink-1); } .aside-list a:hover { color: var(--accent); } .aside-ts, .aside-src, .aside-dist { font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .aside-tone { font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; padding: 0 var(--sp-1); border-radius: var(--r-1); color: var(--ink-3); } .aside-tone--sangat-positif { color: var(--s-pos-2); } .aside-tone--positif { color: var(--s-pos-1); } .aside-tone--netral { color: var(--ink-3); } .aside-tone--negatif { color: var(--s-neg-1); } .aside-tone--sangat-negatif { color: var(--s-neg-2); } /* ============================================================ Almanac (reports list) — Linear-like table */ .almanac { margin-top: var(--sp-5); } .almanac h2 { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-1); border-bottom: var(--rule); padding-bottom: var(--sp-2); margin: 0 0 var(--sp-3); } .almanac ul { list-style: none; padding: 0; margin: 0; } .almanac > ul > li { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: var(--rule); align-items: center; transition: background var(--dur-fast); } .almanac > ul > li:hover { background: var(--paper-2); } .almanac .almanac-date { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); } .almanac .almanac-title { font-family: var(--font-sans); font-size: var(--t-sm); font-weight: 500; color: var(--ink-1); } .almanac .almanac-title a { color: inherit; } .almanac .almanac-title a:hover { color: var(--accent); } .almanac .almanac-actions { display: flex; gap: var(--sp-2); font-family: var(--font-mono); font-size: 11px; } .almanac .almanac-actions a { color: var(--ink-3); border: 1px solid var(--line-1); padding: 2px var(--sp-2); border-radius: var(--r-2); background: var(--surface); } .almanac .almanac-actions a:hover { color: var(--accent); border-color: var(--accent); } .report-form { margin: var(--sp-5) 0; padding: var(--sp-5); border: var(--rule); border-radius: var(--r-4); background: var(--surface); box-shadow: var(--shadow-1); } .report-form label { display: inline-flex; flex-direction: column; gap: var(--sp-1); font-size: var(--t-xs); color: var(--ink-2); margin-right: var(--sp-4); font-weight: 500; } .report-form input[type="date"] { padding: var(--sp-2) var(--sp-3); border: var(--rule); border-radius: var(--r-3); font-family: var(--font-sans); font-size: var(--t-sm); color: var(--ink-1); background: var(--surface); } .report-form-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; } /* ============================================================ Deck-style report wrap */ .report-deck-wrap { max-width: var(--measure-wide); margin: 0 auto; } .report-deck-wrap .deck { display: block; } .report-deck-wrap .slide { background: var(--surface); border: var(--rule); border-radius: var(--r-4); box-shadow: var(--shadow-1); margin-bottom: var(--sp-6); } /* ============================================================ Report body (rendered MD) */ .report-body { max-width: var(--measure-tight); margin: var(--sp-6) auto; color: var(--ink-1); font-size: var(--t-md); line-height: 1.7; } .report-body h2 { font-family: var(--font-sans); font-size: var(--t-xl); font-weight: 600; letter-spacing: -.012em; margin: var(--sp-6) 0 var(--sp-3); padding-top: var(--sp-4); border-top: var(--rule); } .report-body h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .report-body h3 { font-size: var(--t-md); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); } .report-body p { margin: var(--sp-3) 0; } .report-body ul, .report-body ol { padding-left: var(--sp-5); margin: var(--sp-3) 0; } .report-body li { margin: var(--sp-1) 0; } .report-body strong { color: var(--ink-1); font-weight: 600; } .report-body table { border-collapse: collapse; width: 100%; margin: var(--sp-4) 0; font-size: var(--t-sm); } .report-body th, .report-body td { border: var(--rule); padding: var(--sp-2) var(--sp-3); text-align: left; } .report-body th { background: var(--paper-2); font-weight: 600; } .report-body .report-chart { margin: var(--sp-5) calc(-1 * var(--sp-3)); } .report-body .report-chart svg { width: 100%; height: auto; } /* ============================================================ Chat — Quiet minimal */ body[data-route="/"] .page, body[data-route^="/chat"] .page { padding-top: var(--sp-5); padding-bottom: 10rem; } /* ============================================================ Chat layout — ChatGPT-style 2-col (sessions rail + thread) */ /* Override .page constraints on chat route so layout can fill the main column. `margin: 0` + `width: 100%` are critical — without them, the inherited `margin: 0 auto` from the default .page rule leaves the page shrink-wrapped and visually pushed right inside .app-main. */ body[data-route="/"] .page { max-width: none; padding: 0; margin: 0; width: 100%; display: block; } .chat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; min-height: calc(100vh - 0px); transition: grid-template-columns var(--dur-base) var(--ease); } /* When rail is hidden, drop the rail column entirely (single column layout) so the thread content can use the full available width. */ body.cr-hidden .chat-layout { grid-template-columns: minmax(0, 1fr); } body.cr-hidden .chat-rail { display: none; } /* Floating toggle to bring back the chat rail when hidden */ .cr-toggle { display: none; position: fixed; top: 16px; /* sit right next to the (possibly collapsed) app sidebar */ left: calc(var(--app-sb-w, 240px) + 12px); z-index: 10; align-items: center; gap: var(--sp-1); padding: 6px 12px; border: 1px solid var(--line-1); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 11px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-1); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); } .cr-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } body.cr-hidden .cr-toggle { display: inline-flex; } body.sb-collapsed .cr-toggle { left: 68px; } /* Inline close button at the head of the rail */ .cr-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-1) var(--sp-2); border-bottom: var(--rule); margin-bottom: var(--sp-2); } .cr-head-label { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .cr-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--line-1); border-radius: var(--r-2); background: var(--surface); color: var(--ink-3); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); } .cr-close:hover { color: var(--ink-1); border-color: var(--line-2); background: var(--paper-2); } .chat-rail { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; border-right: var(--rule); background: var(--surface); /* match sidebar — no awkward color seam */ padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); } .cs-new { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line-1); border-radius: var(--r-3); background: var(--paper-2); font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); text-decoration: none; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .cs-new:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .cs-new.is-on { border-color: var(--accent); background: var(--accent); color: white; } .cs-plus { font-family: var(--font-mono); font-size: 14px; line-height: 1; font-weight: 500; } .cs-rail-head { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: var(--sp-3) var(--sp-2) var(--sp-1); } .cs-list-v { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .cs-list-v li { display: block; } .cs-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-3); font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); border: 1px solid transparent; } .cs-item:hover { background: var(--surface); color: var(--ink-1); } .cs-item.is-on { background: var(--surface); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 25%, var(--line-1)); font-weight: 500; } .cs-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; flex: 1; min-width: 0; } .cs-meta { font-size: 9.5px; color: var(--ink-3); letter-spacing: .02em; white-space: nowrap; flex-shrink: 0; } .cs-item.is-on .cs-meta { color: color-mix(in oklab, var(--accent) 70%, transparent); } .cs-empty { padding: var(--sp-2) var(--sp-3); } .chat-thread-col { display: flex; flex-direction: column; min-width: 0; padding: var(--sp-5) var(--sp-6) 10rem; min-height: calc(100vh - 0px); } .chat-thread-col .thread { max-width: var(--measure-tight); margin: 0 auto; width: 100%; flex: 1; display: flex; flex-direction: column; } /* When only the empty-state is in the thread, vertically center it. Once real messages exist they stack from the top normally. */ .thread .empty-state { margin: auto; } /* Composer recentered over thread column. Position depends on whether the app sidebar is full/collapsed and whether the chat rail is shown/hidden. */ @media (min-width: 901px) { /* Default: sidebar 240, rail 260 */ body[data-route="/"] .composer { left: calc(240px + 260px + (100vw - 500px) / 2); width: min(var(--measure-tight), calc(100vw - 500px - var(--sp-6))); } body[data-route="/"].cr-hidden .composer { left: calc(240px + (100vw - 240px) / 2); width: min(var(--measure-tight), calc(100vw - 240px - var(--sp-6))); } body[data-route="/"].sb-collapsed .composer { left: calc(56px + 260px + (100vw - 316px) / 2); width: min(var(--measure-tight), calc(100vw - 316px - var(--sp-6))); } body[data-route="/"].sb-collapsed.cr-hidden .composer { left: calc(56px + (100vw - 56px) / 2); width: min(var(--measure-tight), calc(100vw - 56px - var(--sp-6))); } } /* Mobile: collapse chat-rail under the thread (no sidebar at all) */ @media (max-width: 900px) { .chat-layout { grid-template-columns: 1fr; } .chat-rail { position: static; height: auto; max-height: 240px; border-right: none; border-bottom: var(--rule); flex-direction: column; } .chat-thread-col { padding: var(--sp-4) var(--sp-4) 10rem; } } /* ============================================================ Articles paginator */ .paginator { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin: var(--sp-7) 0 0; padding-top: var(--sp-5); border-top: var(--rule); } .pg-step { font-size: var(--t-sm); color: var(--ink-2); padding: var(--sp-1) var(--sp-2); border-bottom: 1px dashed var(--line-2); text-decoration: none; white-space: nowrap; } .pg-step:hover { color: var(--accent); border-bottom-color: var(--accent); } .pg-step.is-disabled { color: var(--ink-4); border-bottom-color: transparent; cursor: not-allowed; } .pg-numbers { list-style: none; margin: 0; padding: 0; display: inline-flex; gap: var(--sp-1); align-items: center; } .pg-num { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 var(--sp-2); font-family: var(--font-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--ink-2); border-radius: var(--r-2); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); } .pg-num:hover { background: var(--paper-2); color: var(--ink-1); } .pg-num.is-current { background: var(--accent); color: white; } .pg-ellipsis { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); padding: 0 var(--sp-2); } @media (max-width: 760px) { .paginator { flex-wrap: wrap; gap: var(--sp-2); justify-content: center; } } .thread { max-width: var(--measure-tight); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-5); min-height: 60vh; } .empty-state { margin: clamp(2rem, 8vh, 6rem) auto var(--sp-5); max-width: 36rem; text-align: center; } .empty-state h1 { font-family: var(--font-sans); font-style: normal; font-weight: 600; font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem); letter-spacing: -.018em; margin: 0 0 var(--sp-4); color: var(--ink-1); } .prompt-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; } .chip { background: var(--surface); border: var(--rule); color: var(--ink-2); font-family: var(--font-sans); font-size: var(--t-sm); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); } .chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .msg { line-height: 1.65; font-size: var(--t-base); color: var(--ink-1); } .msg-user { align-self: flex-end; max-width: 75%; padding: var(--sp-3) var(--sp-4); background: var(--accent); color: white; border-radius: var(--r-4); white-space: pre-wrap; word-wrap: break-word; } .msg-assistant { padding: 0; max-width: 100%; } .msg-md > :first-child { margin-top: 0; } .msg-md > :last-child { margin-bottom: 0; } .msg-md p { margin: 0 0 var(--sp-3); } .msg-md p:last-child { margin-bottom: 0; } .msg-md h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-md); letter-spacing: -.005em; color: var(--ink-1); margin: var(--sp-5) 0 var(--sp-2); padding-top: var(--sp-3); border-top: var(--rule); } .msg-md h2:first-child { margin-top: 0; padding-top: 0; border-top: none; } .msg-md h3 { font-size: var(--t-base); font-weight: 600; margin: var(--sp-4) 0 var(--sp-2); } .msg-md ol, .msg-md ul { margin: var(--sp-2) 0 var(--sp-3); padding-left: var(--sp-5); } .msg-md li { margin: var(--sp-1) 0; } .msg-md strong { font-weight: 600; } .msg-md code { background: var(--paper-2); padding: 1px 5px; border-radius: var(--r-1); font-family: var(--font-mono); font-size: .9em; } .msg-md table { border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--t-sm); width: 100%; } .msg-md th, .msg-md td { border: var(--rule); padding: var(--sp-2) var(--sp-3); text-align: left; } .msg-md th { background: var(--paper-2); font-weight: 600; } .msg-charts { margin: 0 0 var(--sp-4); } .msg-charts svg { width: 100%; height: auto; } .msg-refs { margin: var(--sp-5) 0 0; padding: var(--sp-3) 0 0; list-style: decimal inside; font-size: var(--t-xs); color: var(--ink-3); border-top: var(--rule); } .msg-refs li { margin: var(--sp-1) 0; line-height: 1.5; } .msg-refs a { color: var(--ink-2); } .msg-refs a:hover { color: var(--accent); } .msg-refs-src { font-family: var(--font-mono); font-size: 10px; margin-left: var(--sp-1); color: var(--ink-3); } .thinking { color: var(--ink-3); font-size: var(--t-sm); animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } } .msg-error { color: var(--s-neg-2); font-size: var(--t-sm); } .composer { position: fixed; bottom: var(--sp-5); /* Center within the main column (offset by sidebar width). */ left: calc(240px + (100vw - 240px) / 2); transform: translateX(-50%); width: min(var(--measure-tight), calc(100vw - 240px - var(--sp-6))); display: flex; align-items: flex-end; gap: var(--sp-2); background: var(--surface); border: var(--rule); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4); border-radius: var(--r-4); box-shadow: var(--shadow-2); z-index: 5; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-2); } .composer textarea { flex: 1; border: none; outline: none; resize: none; font-family: var(--font-sans); font-size: var(--t-base); line-height: 1.5; background: transparent; color: var(--ink-1); padding: var(--sp-2) 0; min-height: 1.5rem; max-height: 12rem; } .composer textarea::placeholder { color: var(--ink-3); } .composer button { width: 32px; height: 32px; border-radius: var(--r-3); background: var(--accent); color: white; border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur-fast), opacity var(--dur-fast); flex-shrink: 0; } .composer button:hover:not(:disabled) { background: var(--accent-deep); } .composer button:disabled { opacity: .4; cursor: wait; } /* ============================================================ Trackers page */ .tracker-add { display: flex; gap: var(--sp-2); align-items: stretch; margin: var(--sp-5) 0 0; max-width: 36rem; } .tracker-add input[type="text"] { flex: 1; padding: var(--sp-3) var(--sp-4); border: var(--rule); border-radius: var(--r-3); font-family: var(--font-sans); font-size: var(--t-base); background: var(--surface); color: var(--ink-1); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .tracker-add input[type="text"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .tracker-add button { padding-left: var(--sp-5); padding-right: var(--sp-5); } .banner { margin: var(--sp-4) 0 0; padding: var(--sp-2) var(--sp-4); font-size: var(--t-sm); border: 1px solid; border-radius: var(--r-3); } .banner-ok { color: var(--s-pos-1); border-color: color-mix(in oklab, var(--s-pos-1) 30%, var(--line-1)); background: color-mix(in oklab, var(--s-pos-1) 6%, var(--surface)); } .banner-err { color: var(--s-neg-2); border-color: color-mix(in oklab, var(--s-neg-2) 30%, var(--line-1)); background: color-mix(in oklab, var(--s-neg-2) 6%, var(--surface)); } .banner-warn { color: var(--src-x); border-color: color-mix(in oklab, var(--src-x) 30%, var(--line-1)); background: color-mix(in oklab, var(--src-x) 6%, var(--surface)); } .banner b { color: inherit; font-weight: 600; } .tracker-list { list-style: none; padding: 0; margin: 0; } .tracker-list > li { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.6fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3) 0; border-bottom: var(--rule); } .tracker-list > li.is-disabled { opacity: .5; } .t-term { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-md); color: var(--ink-1); } .t-hash { color: var(--accent); font-family: var(--font-mono); font-style: normal; margin-right: 1px; } .t-meta { font-size: var(--t-xs); color: var(--ink-3); font-family: var(--font-sans); } .t-meta b { color: var(--ink-1); font-weight: 600; } .t-actions { display: flex; gap: var(--sp-2); } .t-actions form { margin: 0; } .t-act { border: var(--rule); background: var(--surface); font-family: var(--font-sans); font-size: var(--t-xs); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-2); cursor: pointer; transition: border-color var(--dur-fast), color var(--dur-fast); } .t-act:hover { border-color: var(--ink-1); color: var(--ink-1); } .t-act-del { color: var(--s-neg-1); } .t-act-del:hover { border-color: var(--s-neg-2); color: var(--s-neg-2); } @media (max-width: 760px) { .tracker-list > li { grid-template-columns: 1fr; gap: var(--sp-2); } .tracker-add { flex-wrap: wrap; } .tracker-add input[type="text"] { width: 100%; } } /* ============================================================ Footer */ .footer { border-top: var(--rule); padding: var(--sp-5) var(--sp-6); margin-top: var(--sp-9); font-size: var(--t-xs); color: var(--ink-3); text-align: center; } .footer b { color: var(--ink-1); font-weight: 600; } .footer .diamond { display: none; } /* drop editorial diamonds */ /* ============================================================ Responsive */ @media (max-width: 760px) { .page { padding: var(--sp-5) var(--sp-4) var(--sp-8); } .dash-grid { grid-template-columns: 1fr; gap: var(--sp-5); } .article-feed > li { grid-template-columns: 1fr; gap: var(--sp-1); } .almanac > ul > li { grid-template-columns: 1fr; gap: var(--sp-1); } .feed-list li { grid-template-columns: 1fr; } } @media (max-width: 900px) { /* Composer reverts to viewport-centered when sidebar collapses to top bar */ .composer { left: 50%; width: min(var(--measure-tight), calc(100% - var(--sp-6))); } } /* ============================================================ Auth / Login */ .auth-shell { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); font-family: var(--font-sans); color: var(--ink-1); background: radial-gradient(900px 540px at 15% 0%, color-mix(in oklab, var(--brand-orange) 14%, transparent) 0%, transparent 62%), radial-gradient(800px 600px at 100% 100%, color-mix(in oklab, var(--brand-teal) 18%, transparent) 0%, transparent 60%), var(--paper-1); } .auth-wrap { width: 100%; max-width: 28rem; } .auth-card { position: relative; background: var(--surface); border: 1px solid var(--line-1); border-radius: var(--r-5); padding: var(--sp-6) var(--sp-6) var(--sp-5); box-shadow: var(--shadow-3); overflow: hidden; } /* Brand stripe at the top — orange → teal nods to the BNI mark + wordmark. */ .auth-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient( 90deg, var(--brand-orange) 0%, var(--brand-orange-deep) 35%, var(--brand-teal) 65%, var(--brand-teal-deep) 100% ); } .auth-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); margin-bottom: var(--sp-5); } .auth-logo { width: auto; height: 36px; margin-bottom: var(--sp-2); } .auth-eyebrow { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0; } .auth-title { margin: 0; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); } .auth-sub { margin: 0; font-size: var(--t-sm); color: var(--ink-3); } .auth-form { display: flex; flex-direction: column; gap: var(--sp-3); } .auth-field { display: flex; flex-direction: column; gap: var(--sp-1); } .auth-label { font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); text-transform: uppercase; } .auth-field input { width: 100%; padding: var(--sp-3) var(--sp-4); font-family: inherit; font-size: var(--t-base); color: var(--ink-1); background: var(--paper-1); border: 1px solid var(--line-2); border-radius: var(--r-3); transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast); } .auth-field input::placeholder { color: var(--ink-4); } .auth-field input:hover { border-color: var(--ink-3); } .auth-field input:focus { outline: none; border-color: var(--brand-teal); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-teal) 18%, transparent); } .auth-submit { margin-top: var(--sp-3); width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); font-family: inherit; font-size: var(--t-base); font-weight: 600; color: white; background: var(--brand-teal); border: 1px solid var(--brand-teal); border-radius: var(--r-3); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .auth-submit:hover { background: var(--brand-teal-deep); border-color: var(--brand-teal-deep); } .auth-submit:active { transform: translateY(1px); } .auth-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-orange) 35%, transparent); } .auth-error { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: var(--t-sm); color: var(--s-neg-2); background: color-mix(in oklab, var(--s-neg-1) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--s-neg-1) 35%, var(--line-1)); border-radius: var(--r-3); } .auth-error-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--s-neg-2); box-shadow: 0 0 0 3px color-mix(in oklab, var(--s-neg-2) 22%, transparent); } .auth-foot { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line-1); display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-3); } .auth-foot-mark { width: 6px; height: 6px; border-radius: 2px; background: var(--brand-orange); flex: none; } /* Sidebar user chip + logout button (used by base.html) */ .sb-user { margin-top: auto; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line-1); display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-xs); color: var(--ink-3); } .sb-user-avatar { width: 26px; height: 26px; border-radius: 999px; background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-teal) 100%); color: white; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: none; } .sb-user-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .sb-logout { background: transparent; border: none; padding: 4px 6px; color: var(--ink-3); font-size: var(--t-xs); cursor: pointer; border-radius: var(--r-2); transition: background var(--dur-fast), color var(--dur-fast); } .sb-logout:hover { background: var(--paper-2); color: var(--brand-orange-deep); } body.sb-collapsed .sb-user-email { display: none; } body.sb-collapsed .sb-logout span { display: none; }