/* Product layout uses the existing Onidot palette, typography and controls. */
:root {
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem;
  --hq-control-height:2.75rem; --hq-header-height:3.5rem;
}
body { margin:0; background:var(--onidot-canvas); color:var(--onidot-text); font-size:.875rem; line-height:1.5; }
* { min-width:0; }
a { color:var(--onidot-accent); }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea,summary { touch-action:manipulation; }
button,select,input:not([type=checkbox]) { min-height:var(--hq-control-height); }
input,select,textarea { width:100%; max-width:100%; padding:.5rem .625rem; border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); background:var(--onidot-raised); color:var(--onidot-text); font-size:1rem; line-height:1.4; }
textarea { resize:vertical; min-height:6rem; }
input[type=checkbox] { width:1.125rem; height:1.125rem; accent-color:var(--onidot-brand); flex:none; }
textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid var(--onidot-focus-ring); outline-offset:2px; }
input[aria-invalid=true],textarea[aria-invalid=true] { border-color:var(--onidot-danger); }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { margin:0; font-size:1.375rem; font-weight:600; line-height:1.35; letter-spacing:-.02em; }
h2 { margin:0 0 .75rem; font-size:1rem; font-weight:600; }
h3 { font-size:.875rem; font-weight:600; }
p { margin:0 0 .75rem; }
small,.muted { color:var(--onidot-muted); }
small { font-size:.8125rem; }
svg { width:1rem; height:1rem; flex:none; }
button:disabled { cursor:not-allowed; }
.skip-link { position:fixed; z-index:80; top:-6rem; left:1rem; padding:.75rem; background:var(--onidot-raised); }
.skip-link:focus { top:.5rem; }
.boot-state { padding:2rem; }
.app-header { position:sticky; top:0; z-index:35; display:flex; align-items:center; justify-content:space-between; gap:.75rem; height:var(--hq-header-height); padding:0 .75rem; border-bottom:1px solid var(--onidot-line); background:var(--onidot-canvas); }
.brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--onidot-text); white-space:nowrap; }
.brand strong { font-size:1.0625rem; letter-spacing:-.04em; }
.brand .product-name { border-left:1px solid var(--onidot-line); padding-left:.5rem; font-weight:500; }
.header-actions,.row,.actions { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; }
.header-actions { flex-wrap:nowrap; }
.icon-button { display:grid; place-items:center; width:var(--hq-control-height); padding:0!important; flex:none; }
.account-name { display:none; }
.shell { display:grid; grid-template-columns:minmax(0,1fr); }
.sidebar { display:none; position:fixed; z-index:30; top:var(--hq-header-height); bottom:0; width:min(18rem,calc(100vw - 2rem)); overflow-y:auto; overflow-x:hidden; padding:.75rem; background:var(--onidot-canvas); border-right:1px solid var(--onidot-line); box-shadow:var(--onidot-shadow); }
.sidebar.is-open { display:flex; flex-direction:column; }
.sidebar nav { display:grid; gap:.125rem; }
.nav-link { display:flex; align-items:center; gap:.625rem; min-height:2.75rem; padding:.375rem .625rem; border-radius:var(--onidot-radius); color:var(--onidot-muted); font-size:.875rem; text-decoration:none; }
.nav-link:hover { background:var(--onidot-surface); color:var(--onidot-text); }
.nav-link[aria-current=page] { background:var(--onidot-accent-soft); color:var(--onidot-accent); font-weight:500; }
.nav-label { margin:1.5rem .625rem .5rem; font-size:.75rem; color:var(--onidot-muted); }
.sidebar-note { margin-top:auto; padding:1.5rem .625rem .25rem; font-size:.75rem; color:var(--onidot-muted); line-height:1.6; }
.main { width:100%; max-width:100rem; margin:0 auto; align-self:start; padding:1.25rem 1rem 3rem; }
.page-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.page-heading p { margin:.375rem 0 0; max-width:70ch; color:var(--onidot-muted); font-size:.8125rem; }
.page-heading h1[tabindex="-1"]:focus { outline:none; }
.page-heading .actions { gap:.375rem; }
.section { margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--onidot-line); }
.panel { border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); padding:1rem; background:var(--onidot-canvas); }
.panel h3:first-child { margin-top:0; }
.grid { display:grid; gap:1rem; }
.metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); }
.metric { display:flex; flex-direction:column; align-items:flex-start; gap:.375rem; padding:.875rem 1rem; text-decoration:none; color:var(--onidot-text); }
.metric span { font-size:.8125rem; color:var(--onidot-muted); }
.metric strong { font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; line-height:1.2; }
.metric[href]:hover { background:var(--onidot-surface); }
.filter-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:.5rem; margin:0 0 .75rem; padding:0; border:0; background:transparent; }
.filter-form label.field { gap:0; }
.filter-form .search-field { position:relative; grid-column:1/-1; }
.search-field>svg { position:absolute; left:.625rem; top:50%; transform:translateY(-50%); color:var(--onidot-muted); pointer-events:none; }
.search-field input { padding-left:2rem; }
.product-filter { position:relative; align-self:start; }
.product-filter>summary { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--hq-control-height); padding:.375rem .625rem; border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); background:var(--onidot-raised); cursor:pointer; list-style:none; font-size:.8125rem; white-space:nowrap; }
.product-filter>summary::-webkit-details-marker { display:none; }
.product-filter[open]>summary { background:var(--onidot-surface); }
.filter-count { display:inline-flex; align-items:center; justify-content:center; min-width:1.25rem; color:var(--onidot-muted); font-size:.75rem; }
.product-filter-panel { position:absolute; z-index:20; top:calc(100% + .375rem); right:0; width:min(19rem,calc(100vw - 2rem)); max-height:65dvh; overflow-y:auto; padding:.75rem; background:var(--onidot-raised); border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); box-shadow:var(--onidot-shadow); }
.product-filter .product-options { display:grid; gap:.125rem; }
.product-filter .check-option { width:100%; min-height:2.75rem; margin:0; padding:.375rem .5rem; border:0; border-radius:4px; background:transparent; }
.product-filter .check-option:hover { background:var(--onidot-surface); }
.product-filter .check-option:has(input:checked) { background:var(--onidot-accent-soft); }
.product-filter-footer { display:grid; gap:.625rem; margin-top:.625rem; padding-top:.625rem; border-top:1px solid var(--onidot-line); }
.active-filters { display:flex; align-items:center; flex-wrap:wrap; gap:.375rem; margin:0 0 .75rem; }
.filter-chip { display:inline-flex; align-items:center; gap:.5rem; max-width:100%; min-height:1.75rem; padding:.125rem .5rem; border:1px solid var(--onidot-line); border-radius:4px; background:var(--onidot-surface); text-decoration:none; color:var(--onidot-text); font-size:.75rem; overflow-wrap:anywhere; }
.filter-chip>span { color:var(--onidot-muted); font-size:1rem; }
.filter-chip:hover { border-color:var(--onidot-control-line); background:var(--onidot-accent-soft); }
.filter-reset { display:inline-flex; align-items:center; min-height:2rem; padding:0 .25rem; color:var(--onidot-muted); font-size:.75rem; text-decoration:none; }
.filter-reset:hover { color:var(--onidot-text); text-decoration:underline; }
.list-summary { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; color:var(--onidot-muted); font-size:.75rem; }
.list-summary strong { color:var(--onidot-text); font-weight:500; font-variant-numeric:tabular-nums; }
label.field { display:grid; gap:.375rem; font-size:.8125rem; font-weight:500; }
.field-label { display:flex; align-items:center; gap:.375rem; }
.field-label small { font-weight:400; font-size:.75rem; }
.field-error { font-size:.8125rem; color:var(--onidot-danger); }
.field-error:empty { display:none; }
.product-options { display:flex; flex-wrap:wrap; gap:.375rem; }
.check-option { display:inline-flex; align-items:center; gap:.5rem; min-height:2.75rem; padding:.375rem .5rem; border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); font-size:.8125rem; overflow-wrap:anywhere; }
.check-option:has(input:checked) { background:var(--onidot-accent-soft); border-color:var(--onidot-accent); color:var(--onidot-accent); }
fieldset { border:0; padding:0; margin:0; }
legend { padding:0 0 .5rem; font-size:.8125rem; font-weight:500; }
.inbox-table { display:block; width:100%; border-collapse:collapse; }
.inbox-table thead { display:none; }
.inbox-table tbody { display:grid; }
.inbox-table tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.5rem; padding:.875rem 0; border-bottom:1px solid var(--onidot-line); }
.inbox-table td { display:block; font-size:.8125rem; overflow-wrap:anywhere; }
.inbox-table td:first-child { grid-column:1/-1; font-size:.875rem; }
.item-title { display:block; font-weight:500; text-decoration:none; color:var(--onidot-text); overflow-wrap:anywhere; }
.item-title:hover { color:var(--onidot-accent); }
.item-title:focus-visible { outline:2px solid var(--onidot-focus-ring); outline-offset:3px; border-radius:2px; }
.product-tags { display:flex; align-items:center; gap:.25rem; }
.product-tags .badge { max-width:9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.product-more { font-size:.75rem; color:var(--onidot-muted); font-variant-numeric:tabular-nums; }
.badge { display:inline-flex; align-items:center; gap:.375rem; padding:.125rem .375rem; max-width:100%; border-radius:4px; background:var(--onidot-surface); color:var(--onidot-muted); font-size:.75rem; line-height:1.5; overflow-wrap:anywhere; }
.badge[data-status]::before { content:""; width:.3125rem; height:.3125rem; border-radius:50%; background:currentColor; flex:none; }
.badge[data-status=VERIFYING],.badge[data-priority=URGENT] { color:var(--onidot-warning); background:var(--onidot-warning-soft); }
.badge[data-status=CLOSED] { color:var(--onidot-success); background:var(--onidot-success-soft); }
.badge[data-status=IN_PROGRESS] { color:var(--onidot-accent); background:var(--onidot-accent-soft); }
.badge[data-priority=UNSET] { background:transparent; color:var(--onidot-muted); }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; }
.state { padding:3rem 1rem; text-align:center; display:grid; justify-items:center; gap:.75rem; color:var(--onidot-muted); }
.state h2,.state p { margin:0; }
.state h2 { color:var(--onidot-text); }
.notice { margin-bottom:.75rem; padding:.625rem .75rem; border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); background:var(--onidot-surface); font-size:.8125rem; overflow-wrap:anywhere; }
.notice.error { color:var(--onidot-danger); background:var(--onidot-danger-hover); border-color:var(--onidot-danger-control-line); }
.notice.success { color:var(--onidot-success); background:var(--onidot-success-soft); }
.editor { max-width:76rem; }
.form-stack { display:grid; gap:1rem; }
.form-columns { display:grid; gap:.875rem; }
.subsection { padding-top:1rem; border-top:1px solid var(--onidot-line); }
.subsection>p.muted { font-size:.75rem; }
.form-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap; padding-top:.875rem; border-top:1px solid var(--onidot-line); }
.prose { white-space:pre-wrap; overflow-wrap:anywhere; max-width:75ch; line-height:1.7; }
.metadata { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:.625rem .75rem; font-size:.8125rem; }
.metadata dt { color:var(--onidot-muted); font-size:.75rem; }
.metadata dd { margin:0; overflow-wrap:anywhere; }
.history { display:grid; gap:1rem; padding-left:1.25rem; font-size:.8125rem; }
.history p { margin:.25rem 0; }
.repeater { display:grid; gap:.75rem; }
.repeater-row { display:grid; gap:.75rem; margin:0; padding:.875rem; border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); }
.repeater-row .row { justify-content:space-between; }
.detail-layout { display:grid; gap:1.5rem; }
.detail-layout>.detail-side { display:grid; align-content:start; gap:1rem; }
.detail-side .panel { background:var(--onidot-surface); }
.detail-side .panel h2 { font-size:.875rem; }
.detail-layout>div>.panel { border:0; padding:0; }
.button-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
.onidot-button { min-height:var(--hq-control-height); padding:.375rem .625rem; font-size:.8125rem; line-height:1.4; white-space:normal; }
.onidot-button--primary { color:#fff; }
.onidot-button--secondary { font-weight:500; }
.onidot-button--ghost { color:var(--onidot-muted); }
.login-panel { max-width:30rem; margin:3rem auto; }
.compact-list { margin:0; padding:0; list-style:none; }
.compact-list li { padding:.875rem 0; border-bottom:1px solid var(--onidot-line); overflow-wrap:anywhere; }
.compact-list li:last-child { border-bottom:0; }
.reporter-main { max-width:68rem; }
.reporter-main .editor { max-width:48rem; margin:auto; }
.reporter-main>.panel.editor { max-width:46rem; margin:0; }
.preview-dialog { width:min(42rem,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); padding:1.25rem; border:1px solid var(--onidot-line); border-radius:var(--onidot-radius); background:var(--onidot-canvas); color:var(--onidot-text); overflow:auto; }
.preview-dialog::backdrop { background:var(--onidot-backdrop); }
.preview-dialog h2 { margin-bottom:.5rem; }
.preview-dialog .prose { max-height:40dvh; overflow:auto; padding:.875rem; margin-bottom:.75rem; background:var(--onidot-surface); border-radius:var(--onidot-radius); }
.skeleton { height:1rem; margin:.75rem 0; background:var(--onidot-surface); border-radius:var(--onidot-radius); }
.skeleton.short { width:40%; }
.readonly-evaluation { padding-left:.875rem; border-left:2px solid var(--onidot-line); }
#form-message:empty { display:none; }
html { scroll-padding-top:4rem; }
@media(min-width:640px) {
 .main { padding:1.5rem 1.5rem 3rem; }
 .form-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .filter-form { grid-template-columns:minmax(12rem,1fr) repeat(3,minmax(7rem,1fr)); }
 .filter-form .search-field { grid-column:1/-1; }
 .account-name { display:inline; max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.75rem; color:var(--onidot-muted); }
 .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(min-width:1024px) {
 .shell { grid-template-columns:13rem minmax(0,1fr); }
 .sidebar,.sidebar.is-open { display:flex; flex-direction:column; position:sticky; top:var(--hq-header-height); height:calc(100dvh - var(--hq-header-height)); width:13rem; box-shadow:none; }
 .nav-toggle { display:none; }
 .main { padding:1.5rem 1.75rem 3rem; }
 .filter-form { display:flex; gap:.5rem; }
 .filter-form .search-field { flex:1 1 16rem; }
 .filter-form>label:not(.search-field) { flex:0 1 8.25rem; }
 .filter-form>button,.product-filter { flex:none; }
 .metrics { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .metric+.metric { border-left:1px solid var(--onidot-line); }
 .inbox-table { display:table; table-layout:fixed; }
 .inbox-table thead { display:table-header-group; }
 .inbox-table tbody { display:table-row-group; }
 .inbox-table tr { display:table-row; padding:0; border:0; }
 .inbox-table th { height:2rem; padding:0 .625rem; color:var(--onidot-muted); font-size:.75rem; font-weight:500; text-align:left; border-bottom:1px solid var(--onidot-line); }
 .inbox-table td { display:table-cell; height:3rem; padding:.375rem .625rem; vertical-align:middle; border-bottom:1px solid var(--onidot-line); font-size:.8125rem; }
 .inbox-table th:first-child,.inbox-table td:first-child { width:40%; font-size:.875rem; }
 .inbox-table th:nth-child(2) { width:8%; }
 .inbox-table th:nth-child(3) { width:17%; }
 .inbox-table th:nth-child(4) { width:11%; }
 .inbox-table th:nth-child(5) { width:9%; }
 .inbox-table th:last-child { width:15%; }
 .inbox-table td:last-child { font-size:.75rem; white-space:nowrap; }
 .inbox-table .item-title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
 .inbox-table tbody tr:hover,.inbox-table tbody tr:focus-within { background:var(--onidot-surface); }
 .detail-layout { grid-template-columns:minmax(0,1fr) 17.5rem; gap:2rem; }
 .detail-side { padding-left:1.25rem; border-left:1px solid var(--onidot-line); }
 .detail-side .panel { padding:.875rem; }
 .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .editor:not(.reporter-editor) { grid-template-columns:minmax(0,1fr) minmax(17rem,20rem); column-gap:2rem; align-items:start; }
 .editor>#form-message,.editor>.form-actions { grid-column:1/-1; }
 .editor-side { padding-left:1.25rem; border-left:1px solid var(--onidot-line); gap:1.25rem; }
 .editor-side .subsection:first-child { border-top:0; padding-top:0; }
 .editor-side .form-columns { grid-template-columns:minmax(0,1fr); }
 .editor-main>.form-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .editor-main .subsection textarea { min-height:5rem; }
}
@media(min-width:1024px) and (pointer:fine) {
 :root { --hq-control-height:2rem; --hq-header-height:3rem; }
 input,select,textarea { font-size:.875rem; padding:.3125rem .625rem; line-height:1.4; }
 input[type=checkbox] { width:1rem; height:1rem; }
 .onidot-button { font-size:.8125rem; padding:.3125rem .625rem; }
 .onidot-button--primary { min-height:2.125rem; }
 .nav-link { min-height:2rem; font-size:.8125rem; padding:.25rem .625rem; }
 .check-option,.product-filter .check-option { min-height:2rem; padding:.25rem .5rem; }
 .product-filter>summary { padding:.25rem .625rem; }
 .filter-chip { min-height:1.5rem; }
}
@media(pointer:coarse) {
 .filter-chip,.filter-reset { min-height:2.75rem; }
 .onidot-button,.product-filter>summary,.check-option,.nav-link { min-height:2.75rem; }
}
@media(prefers-reduced-motion:reduce) {
 * { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}
@media(max-width:1023px) {
 .filter-chip,.filter-reset { min-height:2.75rem; }
}
@media(pointer:coarse) {
 .inbox-table .item-title { display:flex; align-items:center; min-height:2.75rem; }
}
.id-copy-fallback { width:min(18rem,100%); font-family:var(--onidot-code-font-family); font-size:.75rem; }
@media(min-width:1024px) {
 .inbox-table td:nth-child(2),.inbox-table td:nth-child(4),.inbox-table td:nth-child(5) { white-space:nowrap; }
}
@media(min-width:1024px) and (max-width:1279px) {
 .inbox-table th:first-child,.inbox-table td:first-child { width:34%; }
 .inbox-table th:nth-child(2) { width:11%; }
 .inbox-table th:nth-child(3) { width:16%; }
 .inbox-table th:nth-child(4) { width:13%; }
 .inbox-table th:nth-child(5) { width:9%; }
 .inbox-table th:last-child { width:17%; }
}