| 1 | /* ------------------------------------------------------------------ */ |
| 2 | /* Inner pages — layouts the primitives do not cover */ |
| 3 | /* ------------------------------------------------------------------ */ |
| 4 | |
| 5 | /* A checklist row: a quiet check mark and the sentence. */ |
| 6 | .check-row { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-ui); line-height: 1.6; } |
| 7 | .check-row .icon { margin-top: 0.2em; color: var(--live); } |
| 8 | |
| 9 | /* The models table's reasoning label. */ |
| 10 | .models-reasoning { |
| 11 | display: inline-block; |
| 12 | margin-inline-start: var(--space-2); |
| 13 | padding: 0 0.375rem; |
| 14 | color: var(--muted); |
| 15 | font-size: var(--text-caption); |
| 16 | font-weight: 500; |
| 17 | border: 1px solid var(--line); |
| 18 | border-radius: var(--radius-control); |
| 19 | } |
| 20 | |
| 21 | /* /install: the quick plate above the verified guide. */ |
| 22 | .install-head { |
| 23 | width: var(--container); |
| 24 | max-width: var(--measure-prose); |
| 25 | margin-inline: auto; |
| 26 | padding-block: clamp(2rem, 5vw, 3.5rem) var(--space-6); |
| 27 | } |
| 28 | .install-head-inner { display: flex; align-items: flex-start; gap: var(--space-5); } |
| 29 | .install-head-pose { --pose-size: 5rem; } |
| 30 | .install-head-text { display: grid; gap: var(--space-3); flex: 1; min-width: 0; } |
| 31 | .install-head-source { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-ui); } |
| 32 | .install-head-source .icon { color: var(--live); } |
| 33 | .install-head-note { color: var(--muted); font-size: var(--text-ui); } |
| 34 | @media (max-width: 640px) { |
| 35 | .install-head-inner { flex-direction: column; } |
| 36 | .install-head-pose { --pose-size: 3.5rem; } |
| 37 | } |
| 38 | |
| 39 | /* /computer-use: the download row. */ |
| 40 | .cu-download { display: grid; gap: var(--space-3); } |
| 41 | |
| 42 | /* /roadmap: one group per status. */ |
| 43 | .roadmap-tracks { display: grid; gap: var(--space-6); } |
| 44 | .roadmap-track-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } |
| 45 | .roadmap-track-head h3 .status { font-size: var(--text-heading); font-weight: 600; } |
| 46 | .roadmap-track-head h3 .status-dot { width: 0.625rem; height: 0.625rem; } |
| 47 | .roadmap-item { display: grid; gap: var(--space-1); } |
| 48 | .roadmap-item-title { font-size: var(--text-ui); font-weight: 500; } |
| 49 | .roadmap-item-note { color: var(--muted); font-size: var(--text-ui); line-height: 1.6; } |
| 50 | |
| 51 | /* /faq */ |
| 52 | .faq-search { margin-bottom: var(--space-5); } |
| 53 | .faq-search-count { min-height: 1.25rem; margin-top: var(--space-2); color: var(--muted); font-size: var(--text-caption); } |
| 54 | .faq-index { flex: none; width: 1.75rem; color: var(--muted); font-size: var(--text-caption); font-weight: 500; } |
| 55 | .faq-question { flex: 1; min-width: 0; } |
| 56 | .faq-answer { max-width: none; padding-inline-start: calc(var(--space-4) + 1.75rem + var(--space-3)); font-size: var(--text-body); } |
| 57 | .faq-sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); color: var(--muted); font-size: var(--text-caption); } |
| 58 | .faq-more { margin-top: var(--space-6); } |
| 59 | @media (max-width: 640px) { |
| 60 | .faq-answer { padding-inline-start: var(--space-4); } |
| 61 | } |
| 62 | |
| 63 | /* /constitution: excerpts of a real session's reasoning. */ |
| 64 | .trace { |
| 65 | display: flex; |
| 66 | flex-direction: column; |
| 67 | min-width: 0; |
| 68 | border: 1px solid var(--line); |
| 69 | border-radius: var(--radius-surface); |
| 70 | background: var(--surface); |
| 71 | overflow: hidden; |
| 72 | } |
| 73 | .trace-head { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); } |
| 74 | .trace-context { color: var(--muted); font-size: var(--text-caption); line-height: 1.5; } |
| 75 | .trace-body { |
| 76 | flex: 1; |
| 77 | margin: 0; |
| 78 | padding: var(--space-4); |
| 79 | color: var(--text); |
| 80 | font-family: var(--font-body); |
| 81 | font-size: var(--text-body); |
| 82 | line-height: 1.6; |
| 83 | overflow-wrap: anywhere; |
| 84 | } |
| 85 | .trace-cites { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); } |
| 86 | .trace-decision { |
| 87 | display: flex; |
| 88 | gap: var(--space-2); |
| 89 | padding: var(--space-3) var(--space-4); |
| 90 | color: var(--text); |
| 91 | font-size: var(--text-ui); |
| 92 | line-height: 1.55; |
| 93 | background: color-mix(in srgb, var(--accent) 10%, transparent); |
| 94 | border-top: 1px solid var(--line); |
| 95 | } |
| 96 | .trace-decision .icon { margin-top: 0.2em; color: var(--accent); } |
| 97 | |
| 98 | /* /runtime: maintainer details behind a disclosure. */ |
| 99 | .runtime-details { display: grid; gap: var(--space-3); font-size: var(--text-ui); } |
| 100 | .runtime-details dt { font-weight: 500; } |
| 101 | .runtime-details dd { color: var(--muted); overflow-wrap: anywhere; } |
| 102 | |
| 103 | /* /community: contributor handles. */ |
| 104 | .credit-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } |
| 105 | .credit-list a { |
| 106 | display: inline-flex; |
| 107 | align-items: center; |
| 108 | min-height: 1.75rem; |
| 109 | padding-inline: var(--space-2); |
| 110 | color: var(--text); |
| 111 | font-size: var(--text-ui); |
| 112 | background: var(--surface); |
| 113 | border: 1px solid var(--line); |
| 114 | border-radius: var(--radius-control); |
| 115 | transition: background-color var(--dur-state) var(--ease-out); |
| 116 | } |
| 117 | .credit-list a:hover { background: var(--hover); } |
| 118 | |
| 119 | /* /digest */ |
| 120 | .digest-list { display: grid; gap: var(--space-5); } |
| 121 | .digest-head { display: grid; justify-items: start; gap: var(--space-2); } |
| 122 | |
| 123 | /* /feed */ |
| 124 | .feed-columns { align-items: start; } |
| 125 | .feed-column { |
| 126 | min-width: 0; |
| 127 | border: 1px solid var(--line); |
| 128 | border-radius: var(--radius-surface); |
| 129 | background: color-mix(in srgb, var(--panel) 72%, transparent); |
| 130 | overflow: hidden; |
| 131 | } |
| 132 | .feed-column-head { |
| 133 | display: flex; |
| 134 | align-items: baseline; |
| 135 | justify-content: space-between; |
| 136 | gap: var(--space-3); |
| 137 | padding: var(--space-3) var(--space-4); |
| 138 | border-bottom: 1px solid var(--line); |
| 139 | } |
| 140 | .feed-column-head h2 { font-size: var(--text-heading); } |
| 141 | .feed-items > li + li { border-top: 1px solid var(--line); } |
| 142 | .feed-empty { padding: var(--space-4); } |
| 143 | .feed-card { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); } |
| 144 | .feed-card-meta, |
| 145 | .feed-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); color: var(--muted); font-size: var(--text-caption); } |
| 146 | .feed-card-time, |
| 147 | .feed-card-author { margin-inline-start: auto; } |
| 148 | .feed-card-title { font-size: var(--text-ui); font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; } |
| 149 | .feed-card-title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; } |
| 150 | .feed-action { border: 1px solid var(--line); border-radius: var(--radius-surface); background: color-mix(in srgb, var(--panel) 72%, transparent); } |
| 151 | |
| 152 | /* Account and utility pages: one centred column. */ |
| 153 | .account-entry { |
| 154 | display: grid; |
| 155 | justify-items: center; |
| 156 | gap: var(--space-4); |
| 157 | width: var(--container); |
| 158 | max-width: 30rem; |
| 159 | margin-inline: auto; |
| 160 | padding-block: clamp(3rem, 8vw, 5rem); |
| 161 | text-align: center; |
| 162 | } |
| 163 | .account-entry .page-title { max-width: none; } |
| 164 | .account-entry .page-lede { max-width: 28rem; } |
| 165 | .account-entry-pose { --pose-size: 6.5rem; } |
| 166 | .account-entry .actions { justify-content: center; } |
| 167 | .account-form { display: grid; gap: var(--space-4); width: 100%; text-align: start; } |
| 168 | |
| 169 | /* /admin */ |
| 170 | .admin-head { |
| 171 | display: flex; |
| 172 | flex-wrap: wrap; |
| 173 | align-items: end; |
| 174 | justify-content: space-between; |
| 175 | gap: var(--space-3); |
| 176 | margin-block: var(--space-6); |
| 177 | padding-bottom: var(--space-4); |
| 178 | border-bottom: 1px solid var(--line); |
| 179 | } |
| 180 | |
| 181 | /* /legal */ |
| 182 | .legal-tabs { margin-bottom: var(--space-6); } |
| 183 | .legal-doc > section > h2 { margin-top: var(--space-6); } |
| 184 | .legal-doc .status-line { margin-top: var(--space-7); } |
| 185 |