/* Page composition; component styling comes from the visualization stylesheet. */
body { margin: 0; }
.page { max-width: 920px; margin: 0 auto; padding: 48px 24px; }
.login-page { max-width: 400px; }
.page-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.form-stack { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.site-actions { margin-top: 16px; }
.section { margin-top: 32px; }
.home-cards { grid-template-columns: minmax(0, 1fr); }
pre { overflow-x: auto; }
@media (max-width: 480px) { .page { padding: 24px 16px; } }
.page-nav { margin-bottom: 32px; gap: 18px; }
.page-nav span { margin-left: auto; }
.site-card { display: flex; flex-direction: column; gap: 10px; }
.site-card .site-actions { margin-top: auto; padding-top: 10px; }
.skill-text { white-space: pre-wrap; overflow-wrap: anywhere; }
summary { cursor: pointer; font-weight: 500; padding-block: 8px; }
#action-output { white-space: pre-wrap; overflow-wrap: anywhere; }
.site-summary { display: grid; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
#site-view-controls[hidden], #site-cards[hidden], #site-list[hidden] { display: none; }
.site-table { min-width: 660px; }
.site-table :is(th, td) { vertical-align: middle; }
.site-table th[scope="rowgroup"] { font-size: var(--font-size-h1); font-weight: 700; line-height: 1.25; padding-block: 24px 12px; }
.site-table .site-title { min-width: 140px; max-width: 260px; overflow-wrap: anywhere; }
.site-table .site-description { min-width: 160px; max-width: 240px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
/* Darken the website under the pointer or keyboard focus in either view. */
.site-card:is(:hover, :focus-within), .site-table tbody tr[data-site]:is(:hover, :focus-within) { background: light-dark(color-mix(in srgb, var(--background), var(--foreground) 10%), color-mix(in srgb, var(--background), var(--primary-foreground) 60%)); }