/* ============================================================
   Q-SORT — Global Styles
   ============================================================ */

   @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   :root {
     --bg:        #f5f4f0;
     --surface:   #ffffff;
     --border:    #e2e0d8;
     --border-md: #ccc9be;
     --text:      #1a1917;
     --text-2:    #6b6860;
     --text-3:    #9e9b93;
     --accent:    #2563eb;
     --accent-bg: #eff4ff;
     --accent-dk: #1d4ed8;
     --green:     #16a34a;
     --green-bg:  #f0fdf4;
     --red:       #dc2626;
     --red-bg:    #fef2f2;
     --amber:     #d97706;
     --amber-bg:  #fffbeb;
     --radius-sm: 6px;
     --radius:    10px;
     --radius-lg: 16px;
     --shadow:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
     --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
   }
   
   html {
     font-size: 16px; -webkit-font-smoothing: antialiased; 
    }

    html[data-translating="true"] body {
      filter: blur(6px);
      pointer-events: none;
      user-select: none;
    }
   
   body {
     font-family: 'DM Sans', system-ui, sans-serif;
     background: var(--bg);
     color: var(--text);
     min-height: 100vh;
     line-height: 1.6;
   }
   
   h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
   h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
   h3 { font-size: 1rem; font-weight: 500; }
   p  { color: var(--text-2); }
   label { font-size: .875rem; font-weight: 500; color: var(--text); }
   small { font-size: .8rem; color: var(--text-3); }
   
   .page-wrap { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
   .page-wrap.wide { max-width: 1100px; }
   .page-wrap.narrow { max-width: 560px; }
   
   .hero { margin-top: 2.5rem; text-align: left; }
   
   /* ── Topbar ── */
   .topbar {
     background: var(--surface);
     border-bottom: 1px solid var(--border);
     padding: .875rem 1.5rem;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: sticky;
     top: 0;
     z-index: 100;
     gap: 20px;               /* spacing between items */
     flex-wrap: nowrap; 
   }

   .topbar > * {
    white-space: nowrap;     /* prevents text breaking */
  }
  
   .topbar-brand {
     display: flex; align-items: center; gap: .625rem;
     font-weight: 600; font-size: .9rem; color: var(--text); text-decoration: none;
   }
   .topbar-brand .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
   .topbar-meta { font-size: .8rem; color: var(--text-3); font-family: 'DM Mono', monospace; }
   .topbar-links { display: flex; align-items: center; gap: .9rem; white-space: nowrap; }
   .topbar-links a { text-decoration: none; color: var(--text-2); font-size: .85rem; }
   .topbar-links a:hover { color: var(--text); }
   
   /* ── Cards ── */
   .card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     box-shadow: var(--shadow);
   }
   .card + .card { margin-top: 1rem; }
   .card-header {
     display: flex; align-items: flex-start;
     justify-content: space-between;
     margin-bottom: 1.25rem; gap: 1rem;
   }
   
   /* ── Steps ── */
   .steps { display: flex; gap: .5rem; margin-bottom: 2rem; }
   .step-pill { height: 4px; flex: 1; border-radius: 2px; background: var(--border); transition: background .3s; }
   .step-pill.active { background: var(--accent); }
   .step-pill.done   { background: var(--accent); opacity: .4; }
   
   /* ── Form ── */
   input[type="text"], input[type="email"], input[type="password"], textarea, select {
     width: 100%; padding: .625rem .875rem;
     border: 1px solid var(--border); border-radius: var(--radius-sm);
     font-family: inherit; font-size: .9rem; color: var(--text);
     background: var(--surface); transition: border-color .15s, box-shadow .15s; outline: none;
   }
   input:focus, textarea:focus, select:focus {
     border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
   }
   textarea { resize: vertical; min-height: 80px; }
   .field { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
   .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
   
   /* ── Buttons ── */
   .btn {
     display: inline-flex; align-items: center; gap: .5rem;
     padding: .6rem 1.125rem; border-radius: var(--radius-sm);
     font-family: inherit; font-size: .875rem; font-weight: 500;
     cursor: pointer; transition: all .15s; border: 1px solid transparent;
     text-decoration: none; white-space: nowrap;
   }
   .btn-primary  { background: var(--accent); color: #fff; border-color: var(--accent); }
   .btn-primary:hover  { background: var(--accent-dk); border-color: var(--accent-dk); }
   .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
   .btn-secondary:hover { background: var(--bg); border-color: var(--border-md); }
   .btn-ghost { background: transparent; color: var(--text-2); border-color: transparent; }
   .btn-ghost:hover { background: var(--bg); color: var(--text); }
   .btn-danger { background: var(--red-bg); color: var(--red); border-color: #fecaca; }
   .btn-danger:hover { background: #fee2e2; }
   .btn-sm { padding: .4rem .75rem; font-size: .8rem; }
   .btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
   .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
   
   .icon-btn {
     width: 30px; height: 30px; border-radius: var(--radius-sm);
     background: transparent; border: none; cursor: pointer;
     display: inline-flex; align-items: center; justify-content: center;
     color: var(--text-3); font-size: 1rem; transition: all .15s;
   }
   .icon-btn:hover { background: var(--bg); color: var(--text); }
   
   /* ── Badge ── */
   .badge {
     display: inline-flex; align-items: center;
     padding: .2rem .6rem; border-radius: 100px;
     font-size: .75rem; font-weight: 500; line-height: 1;
   }
   .badge-blue  { background: var(--accent-bg); color: var(--accent); }
   .badge-green { background: var(--green-bg);  color: var(--green); }
   .badge-amber { background: var(--amber-bg);  color: var(--amber); }
   .badge-gray  { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
   .badge-red   { background: var(--red-bg); color: var(--red); }
   
   .divider { height: 1px; background: var(--border); margin: 1.5rem 0; }
   
   /* ── Toast ── */
   #toast {
     position: fixed; bottom: 1.5rem; left: 50%;
     transform: translateX(-50%) translateY(1rem);
     background: var(--text); color: #fff;
     padding: .625rem 1.25rem; border-radius: 100px;
     font-size: .875rem; font-weight: 500;
     opacity: 0; pointer-events: none; transition: all .25s; z-index: 999;
   }
   #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
   
   /* ── Empty state ── */
   .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-3); }
   .empty-state .icon { font-size: 2rem; margin-bottom: .75rem; }
   
   /* ── Spinner ── */
   .spinner {
     width: 14px; height: 14px;
     border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
     border-radius: 50%; animation: spin .6s linear infinite; display: inline-block;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
   
   .mono {
     font-family: 'DM Mono', monospace; font-size: .8rem;
     background: var(--bg); border: 1px solid var(--border);
     border-radius: var(--radius-sm); padding: .25rem .5rem;
   }
   
   /* ── Link row ── */
   .link-row {
     display: flex; align-items: center; gap: .5rem;
     background: var(--bg); border: 1px solid var(--border);
     border-radius: var(--radius-sm); padding: .5rem .75rem;
   }
   .link-row .link-text {
     flex: 1; font-family: 'DM Mono', monospace; font-size: .78rem;
     color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   }
   
   /* ── Tip box ── */
   .tip-box {
     padding: .875rem 1rem; background: var(--amber-bg);
     border: 1px solid #fde68a; border-radius: var(--radius-sm);
     font-size: .85rem; color: var(--amber); margin-top: 1rem;
   }
   
   /* ============================================================
      RESEARCHER — Card list
      ============================================================ */
   .card-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
   
   .card-item {
     display: flex; align-items: center; gap: .75rem;
     background: var(--bg); border: 1px solid var(--border);
     border-radius: var(--radius-sm); padding: .625rem .875rem;
     font-size: .9rem; transition: border-color .15s;
   }
   .card-item:hover { border-color: var(--border-md); }
   .card-item .drag-handle { color: var(--text-3); cursor: grab; font-size: .85rem; user-select: none; }
   .card-item .card-text { flex: 1; }
   .card-item .card-num {
     font-family: 'DM Mono', monospace; font-size: .75rem; color: var(--text-3); min-width: 22px;
   }
   
   .add-card-row { display: flex; gap: .5rem; margin-top: .75rem; }
   .add-card-row input { flex: 1; }
   
   /* My Q-Sorts list */
   .study-row {
     display: flex; gap: 1rem; align-items: flex-start;
     padding: .75rem .875rem;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     margin-bottom: .5rem;
     background: var(--bg);
   }
   .study-row:hover { border-color: var(--border-md); }
   .study-row-main { flex: 1; min-width: 0; }
   .study-row-title { font-weight: 500; color: var(--text); }
   .study-row-desc {
     font-size: .85rem; color: var(--text-2); margin-top: .15rem;
     display: -webkit-box; display: box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
     overflow: hidden;
   }
   .study-row-meta { font-size: .75rem; color: var(--text-3); margin-top: .35rem; }
   .study-row-actions { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
   /* ============================================================
      GENDER TOGGLE BUTTONS
      ============================================================ */
   .gender-group {
     display: flex;
     flex-wrap: wrap;
     gap: .5rem;
     margin-top: .25rem;
   }
   
   .gender-btn {
     padding: .5rem 1.1rem;
     border: 1.5px solid var(--border);
     border-radius: 100px;
     background: var(--surface);
     color: var(--text-2);
     font-family: inherit;
     font-size: .875rem;
     font-weight: 500;
     cursor: pointer;
     transition: all .15s;
     user-select: none;
   }
   
   .gender-btn:hover {
     border-color: var(--accent);
     color: var(--accent);
     background: var(--accent-bg);
   }
   
   .gender-btn.selected {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff;
   }
   
   /* ============================================================
      MODAL / CONFIRM DIALOG
      ============================================================ */
   .modal-backdrop {
     position: fixed; inset: 0;
     background: rgba(0,0,0,.35);
     backdrop-filter: blur(2px);
     display: flex; align-items: center; justify-content: center;
     z-index: 500;
     opacity: 0; pointer-events: none;
     transition: opacity .2s;
   }
   .modal-backdrop.open { opacity: 1; pointer-events: all; }
   .modal-box {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
     padding: 2rem;
     max-width: 420px;
     width: calc(100% - 2rem);
     transform: translateY(10px) scale(.97);
     transition: transform .2s;
   }
   .modal-backdrop.open .modal-box { transform: translateY(0) scale(1); }
   .modal-icon  { font-size: 2rem; margin-bottom: .75rem; }
   .modal-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: .5rem; }
   .modal-body  { font-size: .9rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.5rem; }
   .modal-actions { display: flex; gap: .625rem; justify-content: flex-end; }
   
   .spinner-dark {
     width: 14px; height: 14px;
     border: 2px solid rgba(0,0,0,.12); border-top-color: var(--red);
     border-radius: 50%; animation: spin .6s linear infinite; display: inline-block;
   }
   
   @media (max-width: 600px) {
     .study-row { flex-direction: column; align-items: stretch; }
   }
   
   /* Column preview */
   .col-preview {
     display: flex; flex-direction: column; gap: .65rem; padding: 1rem;
     background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border);
     margin-top: .75rem; min-height: 110px;
   }
   .col-preview-grid {
     display: flex; align-items: flex-end; justify-content: center; gap: 6px;
     width: max-content;
     margin: 0 auto;
   }
   .col-preview-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
   .col-preview-slot {
     width: 28px; height: 18px;
     border: 1px dashed var(--border-md); border-radius: 3px; background: var(--surface);
   }
   
   /* Researcher preview axis defaults */
   .col-preview { --axis-inset: 14px; }
   
   /* ============================================================
      PARTICIPANT — Q-Sort grid
      ============================================================ */
   .sort-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
   
   .axis-bar {
     display: flex; justify-content: space-between; align-items: center;
     font-size: .8rem; font-weight: 500; color: var(--text-2); padding: 0 .25rem;
   }
   .axis-bar .axis-left  { color: var(--green); }
   .axis-bar .axis-right { color: var(--red); }
   
   .progress-track { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
   .progress-fill  { height: 100%; background: var(--accent); border-radius: 2px; transition: width .4s ease; }
   
   .qgrid-scroll { overflow-x: auto; padding-bottom: .5rem; }
   .qgrid {
     --card-width: 88px;
     --card-min-height: 58px;
     --axis-inset: 44px;
     display: flex; flex-direction: column; gap: .65rem;
     min-width: max-content; padding: .5rem .25rem;
   }
   .qgrid-columns {
     display: flex; gap: 8px; align-items: flex-end; justify-content: center;
     width: max-content;
     margin: 0 auto;
   }
   .qcol { display: flex; flex-direction: column; align-items: center; gap: 6px; }
   
   .axis-line {
     position: relative;
     width: 100%;
     min-height: 1rem;
     font-size: .75rem;
     color: var(--text-3);
     font-family: 'DM Mono', monospace;
     text-transform: lowercase;
   }
   .axis-line span {
     position: absolute;
     top: 0;
     transform: translateX(-50%);
     white-space: nowrap;
   }
   .axis-line span:nth-child(1) { left: var(--axis-inset); }
   .axis-line span:nth-child(2) { left: calc(100% - var(--axis-inset)); }
   
   .slot {
     width: var(--card-width, 88px); min-height: var(--card-min-height, 58px);
     border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
     background: var(--surface);
     display: flex; align-items: center; justify-content: center;
     padding: 4px;
     transition: all .15s; cursor: pointer; position: relative;
   }
   .slot:empty::after { content: '+'; color: var(--text-3); font-size: 1rem; }
   .slot.drag-over { border-color: var(--accent); background: var(--accent-bg); border-style: solid; }
   .slot.occupied  { border-style: solid; border-color: var(--border); cursor: default; }
   
   .qcard {
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius-sm); padding: 7px 10px;
     font-size: .75rem; line-height: 1.3; color: var(--text);
     cursor: grab; user-select: none; transition: all .15s;
     box-shadow: var(--shadow); width: 100%; text-align: center;
     white-space: normal; word-break: break-word; overflow-wrap: break-word;
     hyphens: auto;
   }
   .qcard:hover   { border-color: var(--border-md); box-shadow: var(--shadow-md); }
   .qcard.dragging { opacity: .35; cursor: grabbing; }
   .qcard.in-slot  { cursor: grab; box-shadow: none; border-color: transparent; }
   .qcard.in-slot:hover { border-color: var(--border); }
   .qcard.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
   
   .hand-label {
     font-size: .8rem; font-weight: 500; color: var(--text-2); margin-bottom: .5rem;
     display: flex; align-items: center; justify-content: space-between;
   }
   .hand-area {
     display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px;
     border: 1px solid var(--border); border-radius: var(--radius);
     padding: .75rem; background: var(--bg);
   }
   .hand-area .qcard {
     width: auto;
     max-width: var(--card-width, 160px);
     min-width: 96px;
   }
   
   .center-screen { min-height: 60vh; display: flex; align-items: center; justify-content: center; }
   .intro-box { max-width: 500px; text-align: center; }
   .intro-box h1 { margin-bottom: .75rem; }
   .intro-box p  { margin-bottom: 1.5rem; }

   input[type="number"] {
     width: 100%;
     padding: .625rem .875rem;
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     font-family: inherit; 
     font-size: .9rem;
     color: var(--text);
     background: var(--surface);
     transition: border-color .15s, box-shadow .15s;
     outline: none;
   }
   
   /* ============================================================
      RESULTS
      ============================================================ */
   .stats-row {
     display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
     gap: .75rem; margin-bottom: 1.5rem;
   }
   .stat-card {
     background: var(--surface); border: 1px solid var(--border);
     border-radius: var(--radius); padding: 1rem 1.125rem; box-shadow: var(--shadow);
   }
   .stat-label {
     font-size: .72rem; font-weight: 500; color: var(--text-3);
     text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem;
   }
   .stat-value { font-size: 1.75rem; font-weight: 600; color: var(--text); line-height: 1; }
   
   .results-table-wrap { overflow-x: auto; }
   
   table { width: 100%; border-collapse: collapse; font-size: .875rem; }
   th {
     text-align: left; padding: .625rem .875rem;
     font-size: .72rem; font-weight: 600; text-transform: uppercase;
     letter-spacing: .05em; color: var(--text-3);
     border-bottom: 1px solid var(--border); white-space: nowrap;
   }
   td { padding: .625rem .875rem; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
   tr:last-child td { border-bottom: none; }
   tr:hover td { background: var(--bg); }
   
   .score-pill {
     display: inline-flex; align-items: center; justify-content: center;
     min-width: 40px; padding: .2rem .5rem; border-radius: 100px;
     font-family: 'DM Mono', monospace; font-size: .8rem; font-weight: 500;
   }
   .score-pos { background: var(--green-bg); color: var(--green); }
   .score-neg { background: var(--red-bg);   color: var(--red); }
   .score-neu { background: var(--bg); color: var(--text-2); border: 1px solid var(--border); }
   
   .heat-bar { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; min-width: 80px; }
   .heat-fill { height: 100%; border-radius: 3px; }
   
   .resp-row {
     display: flex; align-items: center; gap: .75rem;
     font-size: .85rem; padding: .5rem 0; border-bottom: 1px solid var(--border);
   }
   .resp-row:last-child { border-bottom: none; }
   .resp-id { font-family: 'DM Mono', monospace; font-size: .75rem; color: var(--text-3); min-width: 110px; }
   
   .live-dot {
     width: 8px; height: 8px; background: var(--green);
     border-radius: 50%; display: inline-block; margin-right: .4rem;
     animation: pulse 2s ease-in-out infinite;
   }
   @keyframes pulse {
     0%, 100% { opacity: 1; transform: scale(1); }
     50%       { opacity: .5; transform: scale(.8); }
   }
   
   /* ── Print grid (response modal) ── */
   .print-grid { display: flex; align-items: flex-end; gap: 6px; padding: .5rem 0; }
   .print-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
   .print-col-value { font-size: .7rem; color: var(--text-3); margin-top: 2px; font-family: 'DM Mono', monospace; }
   .print-card {
     width: 80px; min-height: 48px; border-radius: var(--radius-sm);
     font-size: .65rem; line-height: 1.3;
     display: flex; align-items: center; justify-content: center;
     text-align: center; padding: 4px;
   }
   .print-card.occupied { border: 1px solid var(--border-md); background: var(--surface); color: var(--text); }
   .print-card.empty    { border: 1px dashed var(--border); background: var(--bg); }

   /* ── Hamburger button ── */
   .hamburger {
     display: none;
     background: none;
     border: none;
     font-size: 1.4rem;
     cursor: pointer;
     color: var(--text);
     padding: .25rem .5rem;
     border-radius: var(--radius-sm);
     line-height: 1;
   }
   .hamburger:hover { background: var(--bg); }

   @media (max-width: 640px) {
     /* General layout */
     .page-wrap   { padding: 1rem 1rem 3rem; }
     h1           { font-size: 1.35rem; }
     h2           { font-size: 1.1rem; }
     .field-row   { grid-template-columns: 1fr; }
     .stats-row   { grid-template-columns: 1fr 1fr; }
     .card        { padding: 1.1rem; }
     .card-header { flex-direction: column; gap: .5rem; }

     /* Topbar — hamburger */
     .hamburger { display: block; margin-left: auto; }

     .topbar-links {
       display: none;
       position: absolute;
       top: 100%;
       left: 0; right: 0;
       background: var(--surface);
       border-bottom: 1px solid var(--border);
       flex-direction: column;
       align-items: flex-start;
       padding: .75rem 1.25rem 1rem;
       gap: .75rem;
       box-shadow: var(--shadow-md);
       z-index: 99;
     }
     .topbar-links.open { display: flex; }
     .topbar-links select { width: 100%; }
     .topbar-links a { font-size: .95rem; padding: .25rem 0; }
     .topbar { position: relative; flex-wrap: wrap; }

     /* Buttons */
     .btn-lg { padding: .65rem 1.1rem; font-size: .9rem; }

     /* Results table — hide less important cols on small screens */
     .results-table-wrap th:nth-child(4),
     .results-table-wrap td:nth-child(4) { display: none; }

     /* Participant sort grid */
     .qgrid {
       --card-width: 72px;
       --card-min-height: 50px;
     }

     /* Step nav buttons */
     .step-section .btn { font-size: .82rem; padding: .55rem .9rem; }

     /* Link rows */
     .link-row { flex-wrap: wrap; }
     .link-row .link-text { min-width: 0; font-size: .72rem; }

     /* Hero */
     .hero { margin-top: 1.25rem; }
   }