/* ===============================
   Design tokens
   =============================== */
:root{
  --ink:#0b1220;
  --muted:#6b7280;
  --line:#e5e7eb;
  --bg:#ffffff;
  --card:#f8fafc;

  --brand:#0f766e;
  --brand-ink:#ffffff;
  --brand-focus: rgba(15,118,110,.30);

  --blue:#1d4ed8;
  --green:#047857;

  --radius:16px;
  --shadow:0 1px 4px rgba(0,0,0,.06);
}

/* ===============================
   Base / Typography
   =============================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

html { font-size: 16px; }                /* feels like your “good” page at 100% */
@media (min-width: 1200px){
  html { font-size: 18px; }              /* slight bump on wide screens */
}

body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; }
.muted{ color:var(--muted); }
strong{ font-weight:700; }

/* Headings */
h1,.h1{ font-size:1.75rem; line-height:1.2; margin:0 0 12px; font-weight:750; letter-spacing:-0.01em; }
h2,.h2{ font-size:1.375rem; line-height:1.25; margin:0 0 10px; font-weight:700; }
h3,.h3{ font-size:1.125rem; line-height:1.35; margin:0 0 8px;  font-weight:650; }

/* ===============================
   Layout
   =============================== */
/* Page container */
.container{
  max-width: 1280px;   /* was ~1040px */
  margin: 24px auto;
  padding: 0 16px;
}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 20px 16px 10px; border-bottom:1px solid var(--line); background:#fff;
}
.site-header__left{ display:flex; align-items:center; gap:14px; }
.site-header__logo{ height:58px; width:auto; display:block; }
.site-header__title{ font-weight:800; font-size:22px; }
.site-header__link{ color:var(--muted); text-decoration:none; font-weight:600; }
.site-header__link:hover{ color:#111827; }

/* Cards, controls, grids */
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px; margin-bottom:20px;
}
.row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width: 900px){ .grid2{ grid-template-columns:1fr; } }

.input, select.input{
  width:100%; height:44px; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px; background:#fff; font-size:1rem;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus, select.input:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-focus);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 14px;
  border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink);
  font-weight:650; font-size:15px; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background-color .15s, filter .15s;
}
.btn[disabled]{ opacity:.55; cursor:not-allowed; }
.btn.primary{ background:var(--brand); color:#fff; border-color:var(--brand); }
.btn.primary:hover{ filter:brightness(.98); }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 14px;
  border-radius:12px; border:1px solid var(--line);
  background:#fff; color:var(--ink); font-weight:650; font-size:15px;
}
.pill.active{ background:#111827; color:#fff; border-color:#111827; }

/* Progress + answers (question step) */
.progress{ height:8px; background:#eef2f7; border-radius:999px; overflow:hidden; }
.bar{ height:100%; background:var(--brand); width:0%; }
.answers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.choice{
  border:1px solid var(--line); border-radius:10px; padding:10px; text-align:center; cursor:pointer; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.choice.selected{ outline:2px solid var(--brand); border-color:var(--brand); }

/* ===============================
   Functional areas + tooltip
   =============================== */
.fa-row{ border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:10px; background:#fff; position:relative; }
.fa-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; position:relative; }
.hint{ font-size:12px; color:var(--muted); }

/* tooltip badge */
.fa-syn-info{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; line-height:18px; border-radius:50%;
  border:1px solid #cbd5e1; background:#f8fafc;
  font-size:12px; font-weight:600; color:#374151; cursor:pointer;
  margin-left:8px; margin-top:4px; position:relative; user-select:none; z-index:1;
}
.fa-syn-info::after{
  content: attr(data-tip);
  position:absolute; left:50%; transform:translateX(-50%); bottom:125%;
  background:#111827; color:#fff; padding:10px 12px; border-radius:8px;
  font-size:12px; line-height:1.35; box-shadow:0 6px 20px rgba(0,0,0,.18);
  white-space:normal; width:max-content; max-width:320px; max-height:min(40vh,260px);
  overflow:auto; opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:10010;
}
.fa-syn-info::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:115%;
  border:6px solid transparent; border-top-color:#111827; opacity:0; transition:opacity .12s ease; z-index:10011;
}
.fa-syn-info.open::after, .fa-syn-info.open::before{ opacity:1; }
.fa-syn-info.pos-left::after{ left:auto; right:0; transform:none; }
.fa-syn-info.pos-left::before{ left:auto; right:8px; transform:none; }
.fa-syn-info.pos-right::after{ left:0; right:auto; transform:none; }
.fa-syn-info.pos-right::before{ left:8px; right:auto; }
.fa-syn-info.below::after{ top:125%; bottom:auto; }
.fa-syn-info.below::before{ top:115%; bottom:auto; border:6px solid transparent; border-bottom-color:#111827; }

/* ===============================
   Benchmark header metrics
   =============================== */
.circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:999px; font-weight:700; font-size:18px; color:#fff;
}
.circle.blue{ background:var(--blue); }
.circle.green{ background:var(--green); }

/* ===============================
   Benchmark table
   =============================== */
/* Table wrapper keeps horizontal scroll on small screens */
.table-card{ padding:0; }
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

/* Fixed layout → predictable columns, no header overlap */
table.bench{
  width:100%;
  border-collapse: collapse;
  table-layout: fixed;        /* important */
  min-width: 1120px;          /* allow horizontal scroll when needed */
}

/* Baseline cell styling */
table.bench th,
table.bench td{
  padding: 10px 8px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  vertical-align: top;
  white-space: nowrap;        /* avoid wrapping into next line */
  overflow: hidden;           /* enables ellipsis */
  text-overflow: ellipsis;    /* truncate long content */
}

/* Numeric columns right-aligned */
table.bench th.num,
table.bench td.num span[aria-label] {
  display:inline-block;
  width:1.25em;
  text-align:center;
}

/* Column widths via colgroup; adjust to taste */
table.bench col.col-platform   { width: 260px; }
table.bench col.col-submitted  { width: 120px; }
table.bench col.col-vendors    { width: auto; }   /* flex column */
table.bench col.col-tenant,
table.bench col.col-identity,
table.bench col.col-data,
table.bench col.col-workflow,
table.bench col.col-ops,
table.bench col.col-overall, 
table.bench col.col-verified  { width: 78px; }    /* enough for 2 digits & icon */

/* The “YOU” row highlight still rounds perfectly */
.bench tr#focal td,
.bench tr.focal td{
  background: #e6fffb;        /* your highlight */
  position: relative;
  border-left: 4px solid #0f766e;  /* visible left accent */
  border-radius: 12px;         /* smooth corners at row edges */
}

@keyframes pulseGlow{ 0%{ box-shadow:0 0 0 0 rgba(15,118,110,.50);} 100%{ box-shadow:0 0 0 12px rgba(15,118,110,0);} }
.focal-anim{ animation:pulseGlow 1.2s ease-out 3; }

/* Ensure card containers always clip neatly */
.card.table-card {
  border-radius: 12px;   /* match your other cards */
  overflow: hidden;      /* clip inner table edges */
}

/* Highlighted row background should respect rounded corners */
.bench tr.focal {
  background-color: #e6fafa; /* your light blue highlight */
}

/* Round the first/last cell of the focal row */
.bench tr.focal td:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.bench tr.focal td:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* ===============================
   Typeahead
   =============================== */
.ta{ position:relative; }
.ta-input{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:12px; }
.ta-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-focus); }
.ta-pop{
  position:absolute; left:0; right:0; z-index:30; background:#fff; border:1px solid var(--line);
  border-radius:12px; margin-top:6px; max-height:260px; overflow:auto; box-shadow:0 8px 16px rgba(0,0,0,.06);
}
.ta-item{ padding:10px 12px; cursor:pointer; }
.ta-item.active, .ta-item:hover{ background:#f3f4f6; }
.ta-add{ font-weight:600; color:#0f766e; }
.ta-sep{ height:1px; background:#e5e7eb; margin:6px 0; }

/* ===============================
   Utilities
   =============================== */
.truncate-1{ display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fw-600{ font-weight:600; } .fw-800{ font-weight:800; }
.mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; } .mt-16{ margin-top:16px; } .mt-20{ margin-top:20px; }
.p-0{ padding:0!important; }

@media (max-width:640px){
  .circle{ width:40px; height:40px; font-size:14px; }
  .muted{ font-size:14px; }
  .table-wrap{ margin-left:-16px; margin-right:-16px; }
}


/* Toolbar above the table (filters + pager) */
.toolbar{
  display:flex;
  align-items:center;
  justify-content: space-between;  /* pager hugs the right edge */
  gap: 12px;
  flex-wrap: wrap;                  /* wrap nicely when narrow */
  margin: 16px 0 12px;              /* gives air above table */
}

/* The left side: "Submitted by:" + pills */
.toolbar > :first-child{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex: 1 1 auto;                   /* take remaining space; allows pager on far right */
}

/* Keep comfortable vertical padding around pills */
.toolbar .pill{
  /* if you already style .pill, this just ensures consistent hit area */
  padding: 6px 12px;
}

/* the right side: pager */
.pager{
  margin-left:auto;            /* push to the right */
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;          /* keep “Page 1 of 3” on one line */
  flex:0 0 auto;
}

.pager a{ text-decoration:none; }
.pager button{
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:10px;
  background:#fff;
  color:inherit;
}
.pager [aria-disabled="true"] button,
.pager button[disabled]{
  opacity:.45; cursor:not-allowed; pointer-events:none;
}
.pager .muted{ margin:0 8px; }

/* Mobile: put pager on its own row, right aligned */
@media (max-width: 720px){
  .toolbar{ gap:8px; }
  .toolbar > :first-child{ order:1; width:100%; }
  .pager{ order:2; width:100%; justify-content:flex-end; }
}
/* --- Vendor/Product input group (functional areas) --- */
.fa-fields{
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  width: 100%;
  margin-top: 6px; /* matches your spacing in the card */
}

/* single, tidy focus state for the whole group */
.fa-fields:focus-within{
  border-color: var(--teal, #0f766e);
  box-shadow: 0 0 0 3px rgba(15,118,110,.12);
}

/* remove per-input borders & radii inside the group */
.fa-fields .input{
  border: 0;
  border-radius: 0;
  outline: none;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
}

/* the custom typeahead wrapper/list created by makeTypeahead() */
.fa-fields .ta-wrap{ position: relative; }
.fa-fields .ta-wrap + .ta-wrap{ border-top: 1px solid var(--line); }

/* dropdown should match group width */
.fa-fields .ta-list{
  left: 0;
  right: 0;
  width: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  z-index: 20;
}
/* === Benchmark table header: show only the real row, hide abbrev/meta rows === */
.table-card .table-wrap table.bench thead tr {
  display: none;                  /* hide any meta/abbr rows */
}
.table-card .table-wrap table.bench thead tr:last-child {
  display: table-row;             /* keep the final, real header row only */
}
.table-card .table-wrap table.bench thead th {
  display: table-cell;
  white-space: nowrap;
  font-weight: 700;
  vertical-align: bottom;
}
/* prevent any ::before/::after generated abbreviations */
.table-card .table-wrap table.bench thead th::before,
.table-card .table-wrap table.bench thead th::after {
  content: none !important;
}

/* (optional) give numeric columns a fixed comfortable width so labels don't wrap */
.table-card .table-wrap .col-tenant,
.table-card .table-wrap .col-identity,
.table-card .table-wrap .col-data,
.table-card .table-wrap .col-workflow,
.table-card .table-wrap .col-ops,
.table-card .table-wrap .col-overall,
.table-card .table-wrap .col-verified {
  width: 72px;
}