@import url('native.css');
.topbar { position: sticky; top: 0; z-index: 10; min-height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-10); padding: 0 var(--pad-page-inline); background: var(--surface); border-bottom: var(--border); }
.brand { display: flex; gap: var(--space-3); align-items: center; font-family: var(--font-display); font-size: var(--size-wordmark-sm); letter-spacing: var(--track-wordmark-sm); color: var(--text); }
.brand svg { width: var(--space-9); height: var(--space-9); color: var(--aqua); }
.topbar nav { display: flex; gap: var(--space-8); font-size: var(--size-ui); }
.topbar nav a { color: var(--text-3); }
.topbar nav a:hover { color: var(--aqua); }
.account { margin-left: auto; position: relative; }
#account { border: 0; font-size: var(--size-ui); }
#account-menu { position: absolute; right: 0; top: calc(100% + 7px); padding: var(--space-3); background: var(--panel); border: var(--border-strong); border-radius: var(--radius-card-sm); min-width: 160px; }
#account-menu button { width: 100%; justify-content: flex-start; border: 0; }
main { max-width: var(--measure-page); margin: auto; padding: var(--pad-page); }
.heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-10); }
.search { color: var(--text-3); font-size: var(--size-meta); width: 260px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,var(--grid-tile-min)),1fr)); gap: var(--grid-launcher-gap); }
.card { position: relative; background: var(--panel); border: var(--border); border-radius: var(--radius-card); padding: var(--space-10); min-height: 190px; }
.card:has(a):hover { background: var(--panel-hover); border-color: var(--sand-border-hover); }
.card h2 { font-size: var(--size-h3); margin: var(--space-7) 0 var(--space-4); }
.card h2 a { color: var(--sand); }
.card h2 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.card p { color: var(--text-2); font-size: var(--size-meta); margin: var(--space-4) 0 0; }
.card .detail { color: var(--text-3); margin-top: var(--space-8); font-family: var(--font-mono); font-size: var(--size-mono-meta); }
.glyph { display: inline-grid; place-items: center; width: var(--space-12); height: var(--space-12); background: var(--sand-chip-bg); color: var(--sand); border: 1px solid var(--sand-chip-border); border-radius: var(--radius-app-icon); font-family: var(--font-mono); }
#status { color: var(--text-3); font-size: var(--size-ui); }
#status:empty { display: none; }
#landing { padding: 15vh 0; text-align: center; }
#landing p { margin-inline: auto; color: var(--text-2); }
#landing .primary { margin-top: var(--space-8); }
#external { margin-top: var(--space-12); }
#external > h2 { margin-bottom: var(--space-8); }
.feedback-open { margin-left: auto; min-height: 32px; padding-block: var(--space-2); }
.feedback-open:not([hidden]) + .account { margin-left: 0; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); }
.dialog-heading h2 { margin: 0; }
#feedback-form { display: grid; gap: var(--space-7); }
.choice { display: grid; gap: var(--space-4); margin: 0; padding: 0; border: 0; }
.choice legend { margin-bottom: var(--space-4); font-size: var(--size-ui); color: var(--text-2); }
.choice label { display: flex; align-items: center; gap: var(--space-4); color: var(--text); }
.choice input { width: auto; margin: 0; }
#feedback-status:empty { display: none; }
.feedback-mine { margin-top: var(--space-12); padding-top: var(--space-10); border-top: var(--border); }
.feedback-items { display: grid; gap: var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.feedback-items > li { display: grid; gap: var(--space-4); padding: var(--space-8); background: var(--ink); border: var(--border); border-radius: var(--radius-card-sm); }
.feedback-items h4 { margin: 0; font-size: var(--size-ui); color: var(--text); overflow-wrap: anywhere; }
.feedback-items p { margin: 0; color: var(--text-2); font-size: var(--size-meta); overflow-wrap: anywhere; }
.feedback-items .pill { justify-self: start; }
.feedback-items .pill[data-status=shipped] { color: var(--up); }
.feedback-items .pill[data-status=needs_info] { color: var(--warn); }
.feedback-items form { display: grid; gap: var(--space-4); }
@media(max-width:640px) { .heading { flex-direction: column; align-items: stretch; } .search { width: 100%; } .topbar { flex-wrap: wrap; padding-block: var(--space-5); gap: var(--space-6); } .topbar nav { order: 3; width: 100%; } }