@import "tokens.css";
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;line-height:1.45}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}
.container{width:100%;max-width:760px;margin:0 auto;padding:1.25rem 1rem 3rem}
/* width:100% opts back into flex stretching: .app-main is a flex column, and
   an auto cross-axis margin (margin:0 auto) otherwise shrink-wraps the item. */
.container--wide{max-width:1120px}
@media (max-width:640px){.container--wide{max-width:760px}}

/* app shell: sidebar + main column */
.app-shell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.sidebar{display:flex;flex-direction:column;gap:.25rem;padding:1rem .75rem;background:var(--surface);border-right:1px solid var(--border-subtle)}
.sidebar .wordmark{margin:0 .35rem .1rem;font-size:1.3rem}
.sidebar__ws{font-size:.78rem;color:var(--text-2);margin:0 .35rem .9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar__nav{display:flex;flex-direction:column;gap:.15rem}
.sidebar__link{display:block;padding:.45rem .6rem;border-radius:var(--radius);color:inherit;text-decoration:none;font-size:.92rem}
.sidebar__link:hover{background:var(--surface-2)}
.sidebar__link.is-active{background:var(--accent-weak);font-weight:600}
.app-main{min-width:0;display:flex;flex-direction:column}

/* app bar */
.app-bar{display:flex;align-items:center;gap:.9rem;padding:.55rem .9rem;background:var(--surface);border-bottom:1px solid var(--border-subtle)}
.app-bar--tall{padding:.75rem 1.5rem}
.app-bar h1{font-size:1.4rem;margin:0}
.wordmark{font-weight:800;letter-spacing:-.01em;color:var(--text)}
.app-bar__spacer{flex:1}
.menu{position:relative;margin-left:.1rem}
.menu>summary{list-style:none;cursor:pointer;width:32px;height:32px;border-radius:50%;background:var(--accent-weak);color:var(--accent);border:1px solid #c7d2fe;font-size:.78rem;display:flex;align-items:center;justify-content:center}
.menu>summary::-webkit-details-marker{display:none}
.menu__panel{position:absolute;right:0;top:120%;width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.1);overflow:hidden;z-index:20}
@media (max-width:760px){
  /* Without an explicit row template, the grid's default align-content:stretch
     divides the leftover 100vh across the two auto rows, ballooning the
     collapsed sidebar row; align-content:start keeps rows sized to content. */
  .app-shell{grid-template-columns:1fr;align-content:start}
  .sidebar{flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--border-subtle);padding:.5rem .75rem}
  .sidebar .wordmark{margin:0 .5rem 0 0;font-size:1.1rem}
  .sidebar__nav{flex-direction:row}
  .sidebar__ws{display:none}
}
.menu__id{padding:.55rem .7rem;border-bottom:1px solid var(--border-subtle)}
.menu__id b{display:block;font-size:.8rem}.menu__id span{font-size:.7rem;color:var(--text-3)}
.menu__item{display:block;width:100%;text-align:left;background:none;border:0;padding:.5rem .7rem;font:inherit;font-size:.8rem;color:var(--text);cursor:pointer}
.menu__item:hover{background:var(--surface-2)}
.menu__item--danger{color:var(--err)}

/* buttons + pills */
.btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:.82rem;font-weight:600;padding:.45rem .8rem;border-radius:var(--radius-sm);cursor:pointer}
.btn--primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn--ghost{border-color:#c7d2fe;color:var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn--sm{padding:.25rem .55rem;font-size:.74rem}
.row-actions{white-space:nowrap;text-align:right}
.row-actions>*+*{margin-left:.4rem}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;border-radius:20px;padding:.12rem .55rem;background:var(--surface-2);color:var(--text-2);white-space:nowrap}
.pill::before{content:"●";font-size:.6em}
.pill--muted{background:var(--surface-2);color:var(--text-2)}.pill--muted::before{content:none}
.pill--ok{background:var(--ok-bg);color:var(--ok)}
.pill--warn{background:var(--warn-bg);color:var(--warn)}
.pill--err{background:var(--err-bg);color:var(--err)}
.count{font-size:.72rem;color:var(--text-2);background:var(--surface-2);border-radius:20px;padding:.12rem .55rem}

/* dashboard */
.page-head{display:flex;align-items:center;justify-content:space-between;margin:.3rem 0 1rem}
.page-head h1{font-size:1.4rem;margin:0}
.report-list{display:flex;flex-direction:column;gap:.5rem}
.report-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:.7rem .85rem}
.report-row__title{font-weight:600}
.report-row__meta{color:var(--text-2);font-size:.74rem;margin-top:.15rem}
.report-row__side{display:flex;align-items:center;gap:.5rem}
.empty{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem 1rem}
.empty__icon{font-size:1.6rem}
.empty h2{font-size:1rem;margin:.4rem 0 .2rem}
.empty p{color:var(--text-2);font-size:.82rem;margin:0 0 .8rem}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--accent-weak);border-top-color:var(--accent);margin:0 auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* report detail */
.crumb{font-size:.74rem;color:var(--text-2);margin-bottom:.3rem}
.report-header{margin-bottom:.9rem}
.report-header h1{font-size:1.3rem;margin:.1rem 0}
.report-header p{color:var(--text-2);font-size:.85rem;margin:.2rem 0 0}
.panel{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:.7rem .8rem;margin-bottom:1rem}
.panel__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}
.label{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.dropzone{display:block;width:100%;border:1.5px dashed var(--border);border-radius:var(--radius);padding:1rem;text-align:center;color:var(--text-2);font-size:.8rem;background:var(--surface);cursor:pointer}
.dropzone input{display:none}
.dropzone--error{border-color:#fca5a5;background:var(--err-bg);color:var(--err)}
.recordings{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}
.recording{border:1px solid var(--border-subtle);border-radius:var(--radius);padding:.45rem .55rem}
.recording.recording--failed{border-color:#fecaca}
.recording__name{font-size:.76rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage{font-size:.66rem;font-family:var(--mono);margin-top:.15rem}
.stage--ok{color:var(--ok)}.stage--warn{color:var(--warn)}.stage--err{color:var(--err)}
.progress{height:3px;background:#f1e3cf;border-radius:3px;margin-top:.3rem;overflow:hidden}
.progress__bar{height:100%;background:#d29922;width:55%}

/* bugs + filter */
.bugs{margin-top:.3rem}
.filter{display:flex;gap:.3rem}
.filter__btn{font-size:.7rem;border:1px solid var(--border);background:var(--surface);color:var(--text-2);border-radius:20px;padding:.12rem .5rem;cursor:pointer}
.filter__btn.is-active{background:var(--text);color:#fff;border-color:var(--text)}
.bug-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-subtle);border-left:3px solid var(--text-3);border-radius:var(--radius);padding:.6rem;margin-bottom:.5rem}
.bug-card__main{display:flex;gap:.6rem;cursor:pointer;min-width:0;position:relative}
.bug-card__open{text-decoration:none;color:inherit}
.bug-card__open::after{content:"";position:absolute;inset:0}
.bug-card[data-severity="blocker"]{border-left-color:var(--sev-blocker)}
.bug-card[data-severity="major"]{border-left-color:var(--sev-major)}
.bug-card[data-severity="minor"]{border-left-color:var(--sev-minor)}
.bug-card[data-severity="trivial"]{border-left-color:var(--sev-trivial)}
.bug-card[data-severity="nice-to-have"]{border-left-color:var(--sev-nice-to-have)}
.bug-card__thumb{width:96px;height:62px;border-radius:var(--radius);object-fit:cover;background:var(--border);flex-shrink:0}
.bug-card__body{flex:1;min-width:0}
.bug-badge{font-size:.6rem;font-weight:700;border-radius:var(--radius-sm);padding:.05rem .35rem;text-transform:uppercase}
.bug-badge[data-severity="blocker"]{color:var(--sev-blocker);background:var(--err-bg)}
.bug-badge[data-severity="major"]{color:var(--sev-major);background:#fff7ed}
.bug-badge[data-severity="minor"]{color:var(--sev-minor);background:#fefce8}
.bug-badge[data-severity="trivial"]{color:var(--sev-trivial);background:var(--surface-2)}
.bug-badge[data-severity="nice-to-have"]{color:var(--sev-nice-to-have);background:var(--accent-weak)}
/* Tag dropdowns (bug card footer + drawer head) */
.bug-tags{display:flex;gap:.35rem;align-items:center}
.bug-tags__select{appearance:none;-webkit-appearance:none;font:inherit;font-size:.62rem;font-weight:700;text-transform:uppercase;border:1px solid transparent;border-radius:var(--radius-sm);padding:.12rem 1rem .12rem .4rem;cursor:pointer;color:var(--text-2);background-color:var(--surface-2);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="4"><path d="M0 0l3 4 3-4z" fill="%236b7280"/></svg>');background-repeat:no-repeat;background-position:right .35rem center}
.bug-tags__select:hover{border-color:var(--border)}
.bug-tags__select[name="bug_type"][data-bugtype=""]{background-color:transparent;border:1px dashed var(--border);color:var(--text-3);font-weight:600;text-transform:none}
.bug-tags__select[data-severity="blocker"]{color:var(--sev-blocker);background-color:var(--err-bg)}
.bug-tags__select[data-severity="major"]{color:var(--sev-major);background-color:#fff7ed}
.bug-tags__select[data-severity="minor"]{color:var(--sev-minor);background-color:#fefce8}
.bug-tags__select[data-severity="trivial"]{color:var(--sev-trivial);background-color:var(--surface-2)}
.bug-tags__select[data-severity="nice-to-have"]{color:var(--sev-nice-to-have);background-color:var(--accent-weak)}
.bug-card__title{font-size:.85rem;font-weight:700;margin-left:.4rem}
.bug-card__desc{font-size:.74rem;color:var(--text-2);margin-top:.25rem}
.quote{font-size:.7rem;color:var(--text-2);border-left:2px solid var(--border);padding-left:.4rem;margin-top:.35rem;font-style:italic}
.quote__ts{font-family:var(--mono);color:var(--text-3);font-style:normal}
/* filter survives SSE swaps: rule keyed on the stable .bugs element */
.bugs[data-filter="blocker"] .bug-card-wrap:not([data-severity="blocker"]),
.bugs[data-filter="major"]   .bug-card-wrap:not([data-severity="major"]),
.bugs[data-filter="minor"]   .bug-card-wrap:not([data-severity="minor"]),
.bugs[data-filter="trivial"] .bug-card-wrap:not([data-severity="trivial"]),
.bugs[data-filter="nice-to-have"] .bug-card-wrap:not([data-severity="nice-to-have"]){display:none}

/* bug drawer */
.scrim{position:fixed;inset:0;background:rgba(17,24,39,.35);z-index:30}
.drawer{position:fixed;top:0;right:0;height:100%;width:clamp(560px,50vw,92vw);background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 24px rgba(0,0,0,.12);z-index:31;overflow:auto;padding:1rem}
.drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.drawer__close{background:none;border:0;font-size:1rem;color:var(--text-3);cursor:pointer}
.drawer__actions{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.drawer__delete:hover{border-color:#fca5a5;color:var(--err)}
.drawer__tags{display:flex;align-items:center;gap:.4rem;margin:.35rem 0 .5rem}
.drawer__conf{margin:0}
.drawer__edit input,.drawer__edit textarea{width:100%;font:inherit;font-size:.8rem;border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .5rem;margin:.15rem 0 .5rem;background:var(--surface);color:var(--text);resize:vertical}
.drawer__edit .field__label{display:block;margin-top:.2rem}
.drawer__edit-actions{display:flex;gap:.4rem;margin-top:.4rem}
.drawer__media{width:100%;border-radius:var(--radius);border:1px solid var(--border-subtle);margin-top:.5rem}
.drawer__thumbs{display:flex;gap:.35rem;margin-top:.35rem}
.drawer__thumbs img{width:50px;height:34px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}
.field{margin-top:.6rem}
.field__label{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.field p{margin:.1rem 0 0;font-size:.78rem;color:var(--text-2)}

/* login */
.login{display:flex;min-height:100vh}
.login__pitch{flex:0 0 42%;display:flex;flex-direction:column;justify-content:center;padding:2.5rem 2.5rem;background:linear-gradient(160deg,var(--accent-weak),var(--bg))}
.login__pitch h1{font-size:1.8rem;letter-spacing:-.02em;margin:.6rem 0}
.login__steps{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.step{display:flex;gap:.5rem;font-size:.82rem;color:var(--text-2)}
.step__n{color:var(--accent);font-weight:700}
.login__panel{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:2.5rem 3.5rem}
.login__panel h2{margin:0 0 .2rem}
.login__panel .sub{color:var(--text-2);font-size:.82rem;margin-bottom:1.2rem}
.gbtn{display:flex;align-items:center;justify-content:center;gap:.55rem;min-width:260px;border:1px solid var(--border);border-radius:var(--radius);padding:.6rem;font-weight:600}
.gbtn .g{width:16px;height:16px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0)}
.muted{color:var(--text-3);font-size:.7rem;margin-top:.8rem}
@media(max-width:640px){.login{flex-direction:column}.login__pitch{flex:0 0 auto}.drawer{width:100vw}}

/* Kebab actions menu (report rows + detail header), modeled on .menu */
.kebab{position:relative}
.kebab>summary{list-style:none;cursor:pointer;padding:.1rem .4rem;border-radius:var(--radius);color:var(--text-2);font-size:1rem;line-height:1;user-select:none}
.kebab>summary::-webkit-details-marker{display:none}
.kebab>summary:hover{background:var(--accent-weak);color:var(--accent)}
.kebab__menu{position:absolute;right:0;top:120%;min-width:9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.1);overflow:hidden;z-index:20;display:flex;flex-direction:column;padding:.25rem}
.kebab__menu a,.kebab__menu button{text-align:left;background:none;border:0;cursor:pointer;padding:.4rem .55rem;border-radius:var(--radius);font:inherit;font-size:.8rem;color:var(--text);text-decoration:none}
.kebab__menu a:hover,.kebab__menu button:hover{background:var(--accent-weak)}
.kebab__menu button[hx-delete]{color:var(--err)}

/* HEL-304: dashboard task table — inline status editor + status filter */
.status-menu{position:relative;display:inline-block}
.status-menu>summary{list-style:none;cursor:pointer}
.status-menu>summary::-webkit-details-marker{display:none}
/* position:fixed so the panel escapes .table-wrap's overflow-x:auto clip
   (which also clips the Y axis per spec once X is scrollable) — menus.js'
   positionStatusMenu() sets top/left on open and after the lazy load. */
.status-menu__panel{position:fixed;left:0;top:0;min-width:11rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.1);z-index:20;display:flex;flex-direction:column;padding:.25rem}
.status-menu__item{display:flex;align-items:center;gap:.4rem;text-align:left;background:none;border:0;cursor:pointer;padding:.4rem .55rem;border-radius:var(--radius);font:inherit;font-size:.8rem;color:var(--text)}
.status-menu__item:hover{background:var(--accent-weak)}
.status-menu__check{color:var(--accent);font-weight:700}
.status-filter{position:relative}
.status-filter>summary{list-style:none;cursor:pointer}
.status-filter>summary::-webkit-details-marker{display:none}
.status-filter__panel{position:absolute;right:0;top:120%;min-width:11rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.1);z-index:20;display:flex;flex-direction:column;gap:.15rem;padding:.35rem .45rem}
.status-filter__opt{display:flex;align-items:center;gap:.45rem;font-size:.8rem;padding:.25rem .3rem;border-radius:var(--radius);cursor:pointer}
.status-filter__opt:hover{background:var(--accent-weak)}

/* Report header: export button + kebab grouped on the right */
.report-header__controls{display:flex;align-items:center;gap:.4rem}
.export{position:relative}
.export>summary{list-style:none;cursor:pointer;user-select:none}
.export>summary::-webkit-details-marker{display:none}
.export__menu{position:absolute;right:0;top:120%;min-width:9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.1);overflow:hidden;z-index:20;display:flex;flex-direction:column;padding:.25rem}
.export__menu a{text-align:left;padding:.4rem .55rem;border-radius:var(--radius);font-size:.8rem;color:var(--text);text-decoration:none}
.export__menu a:hover{background:var(--accent-weak)}

/* Send-to-Linear popover: anchored <details> panel, mirrors .export/.export__menu */
.linear-send{position:relative;display:inline-block}
.linear-send-slot{display:contents}
.linear-control{display:contents} /* HEL-266 swap root; must not affect layout */
.linear-send>summary{list-style:none;cursor:pointer;user-select:none}
.linear-send>summary::-webkit-details-marker{display:none}
.linear-send__panel{position:absolute;right:0;top:120%;z-index:40;width:min(280px,80vw);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.12);padding:.6rem;display:flex;flex-direction:column;gap:.5rem}
.linear-send--left .linear-send__panel{right:auto;left:0}
.linear-send__panel label{display:flex;flex-direction:column;gap:.2rem;font-size:.8rem;color:var(--text-2)}
.linear-send__panel select{width:100%}
.linear-send__err{color:var(--err);font-size:.78rem;margin:0}
.linear-send__err:empty{display:none}

/* HEL-257 dedupe check states inside the send popover */
.linear-check{display:flex;flex-direction:column;gap:.5rem;max-width:26rem}
.linear-check__preview{border:1px solid var(--border);border-radius:var(--radius);padding:.5rem .6rem}
.linear-check__preview-title{font-weight:600;margin:.2rem 0}

/* HEL-282 in-page duplicate-decision card (report page, between the bugs
   panel head and the task list) */
.dupe-review__row{border-top:1px solid var(--border);padding-top:.6rem;margin-top:.6rem}
.dupe-review__row:first-child{border-top:none;padding-top:0;margin-top:0}
.dupe-review__vs{display:flex;gap:12px}
.dupe-review__vs>div{flex:1;border:1px solid var(--border);border-radius:var(--radius);padding:.5rem .6rem;min-width:0}
.dupe-review__arrow{text-align:center;opacity:.6;margin:.3rem 0}
.dupe-review__merged{border-left:3px solid var(--accent);padding:8px 12px}
.dupe-review__merged-title{font-weight:600;margin:.2rem 0}
.dupe-review__rationale{margin:.3rem 0 .5rem}
.dupe-review__error{color:var(--err);font-size:.85rem;margin:0 0 .6rem}
@media (max-width:640px){.dupe-review__vs{flex-direction:column}}

/* Detail header: text block beside the kebab; inline edit form */
.report-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.report-header__main{min-width:0}
.report-header__edit{display:flex;flex-direction:column;gap:.5rem;width:100%}
.report-header__edit input,.report-header__edit textarea{width:100%;font:inherit;padding:.4rem .55rem;border:1px solid var(--border);border-radius:var(--radius-sm);box-sizing:border-box}
.report-header__edit textarea{min-height:3.5rem;resize:vertical}
.report-header__actions{display:flex;gap:.5rem}

/* Per-recording delete control */
.recording{position:relative}
.recording__del{position:absolute;top:.35rem;right:.4rem;background:none;border:0;cursor:pointer;color:var(--text-3);font-size:.8rem;padding:.1rem .3rem;border-radius:var(--radius);line-height:1}
.recording__del:hover{color:var(--err);background:var(--err-bg)}

/* Report row: the title block is the link; side holds count/pill/kebab. */
.report-row__main{display:flex;flex:1;min-width:0;text-decoration:none;color:inherit}

/* Upload progress — client-rendered into #upload-progress during an in-flight upload */
.recording--uploading{display:flex;flex-direction:column;gap:.25rem}
.upload-stage{display:flex;align-items:center;gap:.35rem;font-size:.72rem;color:var(--text-2)}
.upload-pct{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.spinner--inline{width:12px;height:12px;border-width:2px;margin:0;display:inline-block;vertical-align:middle}
.progress__bar--indet{width:40%;animation:indet 1.1s ease-in-out infinite}
@keyframes indet{0%{margin-left:-40%}100%{margin-left:100%}}

/* Client multipart upload status (raw resumable path) */
.upload-status{margin-top:.5rem;font-size:.9rem}
.upload-status progress{width:100%;height:.5rem}

/* Compress opt-in panel (Task 6) */
.upload-panel { margin-top: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); }
.upload-panel-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.upload-panel-progress { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.upload-panel-progress progress { width: 100%; height: .5rem; }
.upload-error { color: var(--err); }

/* report-row live slot — upload progress / error rendered by JS into .report-row__live */
.report-row{flex-wrap:wrap}
.report-row__live:empty{display:none}
.report-row__live{flex-basis:100%;margin-top:.5rem}
.report-row__live .upload-error{color:var(--err)}

/* Linear integration — banners + badge */
.banner{padding:.5rem .75rem;border-radius:var(--radius-sm);margin:.5rem 0;font-size:.85rem;background:var(--surface-2)}
.banner--ok{background:var(--ok-bg);color:var(--ok)}
.banner--err{background:var(--err-bg);color:var(--err)}
.banner--warn{background:var(--warn-bg);color:var(--warn)}
.badge--linear{display:inline-flex;align-items:center;gap:.25rem;font-size:.78rem;padding:.05rem .4rem;border-radius:var(--radius-sm);background:var(--accent-weak);color:var(--accent);text-decoration:none;font-weight:600;position:relative;z-index:1;white-space:nowrap}

/* htmx request indicator (e.g. the "Sending…" span on the single-bug Send to
   Linear button) — hidden until htmx marks the element/its ancestor in flight. */
.htmx-indicator{display:none}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{display:inline}

/* settings tabs (HEL-254): horizontal section nav under the chrome header */
.tab-nav{display:flex;gap:1.1rem;border-bottom:1px solid var(--border-subtle);margin-bottom:1rem}
.tab-nav__link{padding:.45rem .1rem;font-size:.85rem;color:var(--text-2);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-nav__link:hover{color:var(--text)}
.tab-nav__link.is-active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.card h2{margin:0 0 .6rem;font-size:1rem}
.card label{display:block;font-size:.82rem;color:var(--text-2);margin:.7rem 0 .2rem}
.card select{font:inherit;font-size:.85rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);max-width:280px}
.card form{margin-top:.9rem}
.card button[type=submit]:not(.btn-danger){margin-top:.9rem;border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:.82rem;font-weight:600;padding:.4rem .75rem;border-radius:var(--radius-sm);cursor:pointer}
.btn-danger{border:1px solid var(--err);background:var(--surface);color:var(--err);font:inherit;font-size:.82rem;font-weight:600;padding:.4rem .75rem;border-radius:var(--radius-sm);cursor:pointer}
.usage-page{min-width:0}
.usage-cyclenav{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 1rem}
.usage-cyclenav label{font-size:.82rem;color:var(--text-2)}
.usage-cyclenav select{font:inherit;font-size:.85rem;padding:.35rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);max-width:280px}
.usage-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.6rem;margin-bottom:1rem}
.usage-tile{display:flex;flex-direction:column;gap:.15rem;padding:.7rem .8rem}
.usage-tile__value{font-size:1.3rem;font-weight:700}
.usage-tile__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3)}
.usage-tile__sub{font-size:.75rem;color:var(--text-2)}
.usage-table-card{min-width:0;margin-bottom:1rem}
.usage-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.usage-table{width:100%;border-collapse:collapse;font-size:.85rem}
.usage-table--members{min-width:760px}
.usage-table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);padding:.35rem .45rem;border-bottom:1px solid var(--border);white-space:nowrap}
.usage-table td{padding:.4rem .45rem;border-bottom:1px solid var(--border-subtle)}
.usage-member-col{min-width:13rem}
.usage-member{max-width:18rem;min-width:0}
.usage-member__name,.usage-member__email{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usage-member__name{font-weight:600}
.usage-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;width:1%}
@media (max-width:640px){.usage-table--members{min-width:700px}.usage-member-col{min-width:12rem}}

/* HEL-254 home dashboard tables */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;font-size:.9rem}
.data-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2);padding:.4rem .6rem;border-bottom:1px solid var(--border)}
.data-table td{padding:.55rem .6rem;border-bottom:1px solid var(--border-subtle)}
/* HEL-322: no cell in a dashboard table wraps. The table is width:100%, so a
   long title used to squeeze every other column down to its per-word
   min-content width, breaking the Linear badge, status pill, report count and
   date each onto a second line and giving that row double height. The title
   column absorbs the slack instead: it is clamped to one line with an
   ellipsis, so rows keep a uniform height (max-width:0 is what lets a table
   cell shrink below its min-content width, and so what makes text-overflow
   apply; the percentage width is the hint for how to split the slack). The
   empty-state cell spans the whole table and must keep its natural width, and
   min-width keeps the title legible once the table is narrower than its
   columns need: without that floor the other columns win all the space and the
   title clamps down to a couple of characters on a phone, where .table-wrap
   should scroll instead. */
.data-table th,.data-table td{white-space:nowrap}
.data-table td:first-child:not(.data-table__empty){max-width:0;width:60%;min-width:12rem;overflow:hidden;text-overflow:ellipsis}
.data-table tr:last-child td{border-bottom:0}
.data-table__empty{color:var(--text-2);padding:1.1rem .6rem}

/* inline hyperlink that must stand out against the global a{color:inherit} reset */
.link{display:inline-block;margin-top:.3rem;color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:600;font-size:.85rem}
.link:hover{text-decoration:none}
.link span{text-decoration:none}

/* bug duplicates (from #26) */
.bug-card-wrap{margin-bottom:.5rem}
.bug-card-wrap .bug-card{margin-bottom:0}
.bug-card__foot{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;margin-top:.5rem;padding-top:.45rem;border-top:1px solid var(--border-subtle)}
.bug-card__foot-spacer{flex:1}
.bug-card__action{font-size:.68rem;border:0;background:none;color:var(--text-2);cursor:pointer;padding:.1rem .3rem}
.bug-card__action:hover{color:var(--accent)}
.bug-card__action--danger:hover{color:var(--err)}
.bug-card__num{font-size:.72rem;color:var(--text-3);font-weight:700;font-variant-numeric:tabular-nums;margin-right:.15rem}
.badge--dup{display:inline-flex;align-items:center;gap:.2rem;font-size:.72rem;padding:.05rem .35rem;border-radius:var(--radius-sm);background:var(--accent-weak);color:var(--accent);font-weight:600;margin-left:.25rem}
.duplicates{margin-top:.6rem;border-top:1px dashed var(--border);padding-top:.4rem}
.duplicates>summary{cursor:pointer;list-style:none}
.duplicates>summary::-webkit-details-marker{display:none}
.dup-row{display:flex;align-items:center;gap:.5rem;padding:.35rem .2rem;font-size:.78rem;opacity:.9}
.dup-row__of{color:var(--text-3);font-size:.72rem;margin-left:auto}
.dup-row .btn{margin-left:.4rem}
/* mark-duplicate popover (bug card footer) — anchored data-popover, same
   pattern as .linear-send; dismissal/focus handled by menus.js */
.dup-pick{position:relative;display:inline-block}
.dup-pick>summary{list-style:none;user-select:none}
.dup-pick>summary::-webkit-details-marker{display:none}
.dup-pick__panel{position:absolute;right:0;top:120%;z-index:40;width:min(320px,86vw);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(0,0,0,.12);padding:.6rem}
.dup-pick--up>.dup-pick__panel{top:auto;bottom:120%}
.dup-pick__search{width:100%;margin:.35rem 0 .45rem;padding:.4rem .5rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem}
.dup-pick__list{display:flex;flex-direction:column;gap:.3rem;max-height:200px;overflow-y:auto}
.dup-pick__row{display:flex;align-items:center;gap:.5rem;text-align:left;width:100%;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius);padding:.45rem .5rem;cursor:pointer;font:inherit}
.dup-pick__row:hover{border-color:var(--accent)}

/* ---- Feedback widget (HEL-9) ---- */
.fb-fab {
  position: fixed; left: 16px; bottom: 16px; z-index: 9999;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.15); cursor: pointer; font: inherit;
}
.fb-fab:hover { background: var(--surface-2); }
.fb-dialog { width: min(420px, 92vw); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.fb-dialog::backdrop { background: rgba(0,0,0,.25); }
.fb-form { display: flex; flex-direction: column; gap: 10px; }
.fb-form h3 { margin: 0; }
.fb-msg { width: 100%; min-height: 90px; resize: vertical; font: inherit; padding: 8px; }
.fb-check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.fb-error { color: var(--err); font-size: 13px; }
.fb-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.fb-btn { padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; }
.fb-btn--primary { background: var(--text); color: var(--accent-fg); border-color: var(--text); }
.fb-toast {
  position: fixed; left: 16px; bottom: 64px; z-index: 9999;
  background: var(--ok); color: #fff; padding: 8px 12px; border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.2); animation: fb-fade 4s forwards;
}
@keyframes fb-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* agent-edit highlight: marker edge that a fresh apply flashes into (spec 2026-07-09) */
.edited{border-left:3px solid #eab308;background:#fefce8;border-radius:0 var(--radius) var(--radius) 0;padding:.25rem .5rem .25rem .55rem}
.bug-tags__select.edited{border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:.12rem 1rem .12rem .4rem}
.edited--fresh{animation:edit-land 1.2s ease-out forwards}
@keyframes edit-land{0%{background:#fde047;border-left-color:#ca8a04}100%{background:#fefce8;border-left-color:#eab308}}

/* htmx error toast (menus.js htmx:responseError handler) */
.err-toast{position:fixed;left:16px;bottom:16px;z-index:9999;background:var(--err);color:#fff;padding:8px 12px;border-radius:var(--radius);box-shadow:0 2px 8px rgba(0,0,0,.2);animation:fb-fade 4s forwards;font-size:13px;max-width:60ch}

/* HEL-295 undo toasts: mark-reviewed confirmations with an Undo action.
   Column of toasts in the err-toast slot; each node is removed by menus.js
   after 8s — removal, not just the fade, so a dead toast can't intercept
   clicks. */
/* bottom:70px (not 16px) -- HEL-295 task-6 verification fix: the Feedback
   fab (.fb-fab, HEL-9) is fixed at left:16px;bottom:16px on every page, so
   matching that offset put every undo toast directly underneath/overlapping
   it. Clearing the fab's own ~40px height plus a gap keeps the toast rail
   fully visible and clickable above the fab instead of colliding with it. */
#toasts{position:fixed;left:16px;bottom:70px;z-index:9998;display:flex;flex-direction:column;gap:8px}
.toast{display:flex;align-items:center;gap:12px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;box-shadow:0 2px 8px rgba(0,0,0,.2);font-size:13px;max-width:60ch;animation:toast-fade 8s forwards}
@keyframes toast-fade{0%,85%{opacity:1}100%{opacity:0}}

/* ---- Admin feedback review (/admin/feedback) ---- */
.admin-feedback { display: flex; flex-direction: column; gap: 14px; }
.afb-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.afb-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.afb-who { font-weight: 600; color: var(--text); }
.afb-org { color: var(--text-3); }
.afb-message { margin: 4px 0; white-space: pre-wrap; word-break: break-word; }
.afb-url { font-size: 12px; color: var(--text-3); word-break: break-all; margin-bottom: 8px; }
/* Cap the screenshot to a thumbnail; the <a> links to the full-size image. */
.afb-shot img { max-width: 320px; max-height: 220px; height: auto; border: 1px solid var(--border); border-radius: var(--radius); display: block; }
.afb-console { margin-top: 8px; }
.afb-console pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); padding: 8px; border-radius: var(--radius); font-size: 12px; max-height: 240px; overflow-y: auto; margin: 4px 0 0; }

/* Per-bug feedback notes (drawer) */
.bug-notes{margin-top:.8rem;border-top:1px solid var(--border-subtle);padding-top:.6rem}
.bug-notes form{display:flex;flex-direction:column;gap:.35rem;margin:.35rem 0 .5rem}
.bug-notes textarea{width:100%;min-height:3.2rem;font:inherit;font-size:.85rem;border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .5rem;resize:vertical}
.bug-notes form .btn{align-self:flex-end}
.bug-note{border-top:1px solid var(--border-subtle);padding:.45rem 0}
.bug-note__body{white-space:pre-wrap;font-size:.85rem}
.bug-note__meta{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.25rem}
.bug-note__chip{font-size:.6rem;font-weight:700;text-transform:uppercase;border-radius:var(--radius-sm);padding:.05rem .35rem;color:var(--text-2);background:var(--surface-2)}
.bug-note__chip[data-status="applied"]{color:var(--ok);background:var(--ok-bg)}
.bug-note__chip[data-status="failed"]{color:var(--err);background:var(--err-bg)}
.bug-note__summary{font-size:.75rem;color:var(--text-2)}
.bug-note__error{font-size:.75rem;color:var(--err)}

/* Task groups (HEL-166): bugs nested under agent-created tasks */
.task-group { margin: 0 0 1.1rem; }
.task-group__head { display: flex; align-items: center; gap: .5rem; padding: .35rem .1rem; position: relative; }
.task-group__title { font-weight: 600; }
.task-group__count { font-size: .85em; opacity: .65; }
.task-group__status { display: inline-flex; align-items: center; gap: .35rem; font-size: .85em; opacity: .65; }
.task-group__bugs { padding-left: .9rem; border-left: 2px solid var(--border); }
.task-group--ungrouped .task-group__title { opacity: .7; }
.task-group__head { cursor: pointer; text-decoration: none; color: inherit; }
.task-group__open { text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.task-group__meta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; align-self: flex-start; margin-top: .15rem; }
.task-group__meta .badge--linear { position: relative; }
.task-group__open::after { content: ""; position: absolute; inset: 0; }

/* Sortable table headers (tablesort.js) */
table[data-sortable] th.th-sortable { cursor: pointer; user-select: none; }
table[data-sortable] th[aria-sort]::after { content: " ↑"; opacity: 0.6; }
table[data-sortable] th[aria-sort="descending"]::after { content: " ↓"; }

/* Drawer-opening table links (href-less anchors need the affordance) */
.data-table a.task-open { cursor: pointer; }