/* Public pages: the avocloud marketing look (black canvas, grid, Syne display,
   one coral spark). Components come from the kit; this file only lays them out. */
:root { --nav-h: 64px; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.page { flex: 1; padding-block: var(--avo-space-6, 40px) 80px; display: flex; flex-direction: column; gap: 32px; }

/* top bar */
.site-nav { position: sticky; top: 0; z-index: var(--avo-z-rail, 50); height: var(--nav-h);
            background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--avo-line); }
.nav-inner { display: flex; align-items: center; gap: 32px; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--avo-text); }
.brand b { font-family: var(--avo-font-wordmark); font-weight: 800; font-size: 1.1rem; letter-spacing: .01em; }
.brand b span { color: var(--avo-primary); }
.brand img { color: var(--avo-text); }
.nav-links { display: flex; gap: 4px; }
.nav-links a { padding: 8px 14px; font-family: var(--avo-font-mono); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--avo-text-muted); }
.nav-links a:hover { color: var(--avo-text); }
.nav-links a[aria-current="page"] { color: var(--avo-text); box-shadow: inset 0 -2px 0 var(--avo-primary); }
.nav-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-user form { margin: 0; }
.nav-name { font-family: var(--avo-font-mono); font-size: .8rem; color: var(--avo-text-muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--avo-plate-raised); display: inline-block; }
.site-foot { padding-block: 24px 32px; border-top: 1px solid var(--avo-line); }
.site-foot a { color: var(--avo-text-muted-2); }
.site-foot a:hover { color: var(--avo-primary); }

/* page heads */
.page-head { display: flex; flex-direction: column; gap: 12px; }
.page-head .avo-lead { margin: 0; }
.split-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.split-head > div:first-child { display: flex; flex-direction: column; gap: 12px; min-width: 0; flex: 1 1 420px; }
.head-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.spark { color: var(--avo-primary); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* home */
.hero { display: flex; flex-direction: column; gap: 24px; padding-block: 24px 16px; }
.hero .avo-lead { margin: 0; }
.strip { display: flex; flex-wrap: wrap; gap: 0; margin: 16px 0 0; border: 1px solid var(--avo-line); width: fit-content; max-width: 100%; }
.strip > div { padding: 14px 28px; border-right: 1px solid var(--avo-line); }
.strip > div:last-child { border-right: 0; }
.strip dt { font-family: var(--avo-font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--avo-text-muted); margin-bottom: 6px; }
.strip dd { margin: 0; font-family: var(--avo-font-massive); font-weight: 700; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
section > .avo-kicker { margin-bottom: 20px; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.project-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; position: relative; color: inherit; min-height: 200px; transition: background .1s linear; }
.project-card:hover { background-color: var(--avo-plate-raised); }
.project-card .avo-title { font-size: 1.35rem; margin: 0; }
.project-card p { margin: 0; flex: 1; }
.project-foot { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--avo-line); }
.project-foot .count { display: flex; align-items: baseline; gap: 8px; color: var(--avo-text-muted); }
.project-foot .count b { font-size: 1.8rem; color: var(--avo-primary); }

/* project: toolbar + list */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.avo-tabs a { text-decoration: none; }
.avo-tabs .n { margin-left: 6px; color: var(--avo-text-muted-2); font-variant-numeric: tabular-nums; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters .avo-input { width: 220px; }
.filters .avo-select { width: auto; }
.list-plate { padding: 0; overflow: hidden; }
.bug-list { list-style: none; margin: 0; padding: 0; }
.bug-row { --sev: var(--avo-line-strong); display: flex; align-items: center; gap: 16px; padding: 0 20px 0 0;
           border-bottom: 1px solid var(--avo-line); box-shadow: inset 3px 0 0 var(--sev); transition: background .1s linear; }
.bug-row:last-child { border-bottom: 0; }
.bug-row:hover { background: var(--avo-plate-raised); }
.bug-row.sev-critical { --sev: var(--avo-error); }
.bug-row.sev-high { --sev: var(--avo-warning); }
.bug-row.sev-medium { --sev: var(--avo-info); }
.bug-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px 0 16px 24px; color: inherit; }
.bug-title { font-weight: 600; font-size: 1.05rem; line-height: 1.35; overflow-wrap: anywhere; }
.bug-row:hover .bug-title { color: var(--avo-primary); }
.bug-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--avo-font-mono); font-size: .75rem; color: var(--avo-text-muted); }

/* forms */
.form-plate, .text-plate, .notice { padding: 28px; position: relative; display: flex; flex-direction: column; gap: 20px; }
.notice { flex-direction: row; gap: 12px; padding: 16px 20px; }
.form-plate { max-width: 760px; }
.detail-main .form-plate { max-width: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.empty-plate { padding: 8px 24px; }

/* bug detail */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.text-plate h2 { margin: 0 0 -8px; }
.text-plate h2:not(:first-child) { margin-top: 12px; }
.text-plate p { font-size: 1rem; line-height: 1.65; }
.side-plate { padding: 24px; position: sticky; top: calc(var(--nav-h) + 24px); display: flex; flex-direction: column; gap: 20px; }
.facts { margin: 0; display: flex; flex-direction: column; }
.facts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--avo-line); }
.facts > div:first-child { padding-top: 0; }
.facts dt { font-family: var(--avo-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--avo-text-muted); }
.facts dd { margin: 0; text-align: right; font-size: .9rem; }
.timeline { display: flex; flex-direction: column; gap: 16px; position: relative; }
.entry { padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.entry.is-update { box-shadow: inset 3px 0 0 var(--avo-primary); }
.entry header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.entry .when { margin-left: auto; font-family: var(--avo-font-mono); font-size: .75rem; color: var(--avo-text-muted-2); }
.change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--avo-font-mono); font-size: .75rem; color: var(--avo-text-muted); }
.inline-form { margin: 0; align-self: flex-start; }

@media (max-width: 900px) {
  .detail { grid-template-columns: minmax(0, 1fr); }
  .side-plate { position: static; order: -1; }
  .nav-inner { gap: 16px; }
  .nav-name { display: none; }
}
@media (max-width: 600px) {
  .nav-links a { padding: 8px 8px; }
  .brand b { font-size: 1rem; }
  .two { grid-template-columns: 1fr; }
  .strip > div { padding: 12px 18px; }
  .bug-row { align-items: flex-start; flex-direction: column; gap: 0; padding: 0 16px 14px 0; }
  .bug-row > .avo-tag { margin-left: 24px; }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .filters .avo-input { flex: 1; width: auto; min-width: 0; }
}

a.project-card, .bug-main, .brand, .nav-links a, .avo-tabs a { text-decoration: none; }
a.project-card:hover .avo-title { color: var(--avo-primary); }

/* wider shell + two-column hero (wide screens were a thin column with dead space) */
.avo-container { max-width: 1240px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 48px; align-items: center; padding-block: 32px 24px; }
.hero-copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.hero .avo-display-1 { margin: 0; }
.latest { padding: 24px; position: relative; display: flex; flex-direction: column; gap: 8px; }
.latest ul { list-style: none; margin: 0; padding: 0; }
.latest li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--avo-line); }
.latest li:last-child { border-bottom: 0; padding-bottom: 0; }
.latest a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.latest .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.latest a:hover .t { color: var(--avo-primary); }
.latest .m { font-family: var(--avo-font-mono); font-size: .72rem; color: var(--avo-text-muted); }
.project-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Lifted canvas: the kit's anthracite values (the .avo-ui canvas and surfaces) on the public
   pages, while keeping the grid and the marketing type. Pure black was too heavy for reading. */
html, body {
  --avo-canvas: #141518; --avo-canvas-soft: #17181B;
  --avo-surface: #1B1C20; --avo-surface-raised: #212227; --avo-surface-high: #292A30;
  --avo-glass-tint: rgba(255,255,255,.025); --avo-glass-tint-2: rgba(255,255,255,.04);
  --avo-line: rgba(255,255,255,.10);
  --avo-line-faint: rgba(255,255,255,.04);
  background: #141518;
}
.site-nav { background: rgba(20,21,24,.82); }

/* no background pattern; empty states and footer get real padding */
.avo-empty { padding: 32px 24px; }
.site-foot { border-top: 0; padding-block: 0 32px; }
.foot-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
              padding-top: 24px; border-top: 1px solid var(--avo-line); }
.foot-link { font-family: var(--avo-font-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--avo-text-muted); }
.foot-link:hover { color: var(--avo-primary); }
.empty-plate { padding: 0; }

/* attachments */
.attach { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.attach li { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.thumb { display: block; border: 1px solid var(--avo-line-strong); border-radius: var(--avo-radius, 6px); overflow: hidden; background: var(--avo-plate-raised); }
.thumb img { display: block; max-width: 260px; max-height: 180px; width: auto; height: auto; object-fit: cover; }
.thumb:hover { border-color: var(--avo-primary); }
input.file { padding: 6px; height: auto; }
input.file::file-selector-button { font: inherit; margin-right: 12px; padding: 4px 12px; color: var(--avo-text); background: var(--avo-plate-raised); border: 1px solid var(--avo-line-strong); border-radius: var(--avo-radius, 6px); cursor: pointer; }