/* ============================================================
   TRACE v54 — Structural workbench layout (visual-test build)
   ------------------------------------------------------------
   Loads AFTER v53.css. Adds the demo's workbench STRUCTURE:
   two-column workspace, sticky review/run rail, cost hero,
   always-visible schedule, space-efficient alignment.
   Pure layout layer — element ids/classes from v52 untouched.
   ============================================================ */

/* ---- workspace grid ---- */
/* overflow-x:hidden on .content-area creates a scroll container that breaks
   position:sticky (rail was pushed 72px down). clip = same visual guard,
   no scroll container, sticky works against the window. */
.content-area{overflow-x:clip}
.content-area .main-content{max-width:1560px;margin:0 auto}
.v54-workspace{display:grid;grid-template-columns:minmax(0,1fr) 416px;gap:16px;align-items:start}
.v54-main{min-width:0}
.v54-rail{position:sticky;top:68px;min-width:0}
.v54-rail .card{margin-bottom:14px}
.v54-main .card{margin-bottom:16px}
/* entrance choreography (matches the approved demo rhythm) */
.v54-main > .card:nth-child(1){animation:v53rise .32s var(--v53-ease) both}
.v54-main > .card:nth-child(2){animation:v53rise .32s var(--v53-ease) .07s both}
.v54-rail > .card:nth-child(1){animation:v53rise .32s var(--v53-ease) .13s both}
.v54-rail > .card:nth-child(2){animation:v53rise .32s var(--v53-ease) .19s both}
/* numbered step badges (demo language) */
.v54-step{width:24px;height:24px;border-radius:999px;background:var(--bg-input);border:1px solid var(--border);display:inline-grid;place-items:center;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-secondary);flex:none}
.v54-step.accent{background:var(--accent);border-color:var(--accent);color:#fff}
/* number change pulse — applied by the additive observer script */
@keyframes v54num{0%{transform:scale(1)}35%{transform:scale(1.14);color:var(--accent)}100%{transform:scale(1)}}
.v54-num-pop{display:inline-block;animation:v54num .45s var(--v53-ease)}
#credit-badge{display:inline-block;transition:color .2s var(--v53-ease)}
/* rail micro-lift */
.v54-rail .card{transition:transform .18s var(--v53-ease),box-shadow .18s var(--v53-ease),border-color .18s var(--v53-ease)}
.v54-rail .card:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
#btn-extract{transition:transform .12s var(--v53-ease),box-shadow .18s var(--v53-ease),background .15s var(--v53-ease)}
#btn-extract:hover:not(:disabled){box-shadow:0 6px 18px rgba(232,116,12,.30)}

/* ---- Products card: side-by-side input + settings ---- */
.v54-setup{display:grid;grid-template-columns:minmax(280px,1.15fr) minmax(260px,.85fr);gap:18px;align-items:start}
.v54-setup textarea.form-input{min-height:172px}
.v54-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v54-settings .v54-span2{grid-column:1 / -1}
.v54-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:4px}

/* ---- Review & Run rail card ---- */
.v54-cost-hero{padding:2px 0 10px;border-bottom:1px solid var(--border);margin-bottom:10px}
.v54-cost-hero .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
#credit-cost{font-size:26px!important;font-weight:700!important;letter-spacing:-.02em;color:var(--text-primary)!important;font-variant-numeric:tabular-nums;display:block;margin-top:2px}
#credit-breakdown{font-size:12px;color:var(--text-muted);display:block;margin-top:2px}
#credit-sufficient{font-size:12px;display:block;margin-top:4px;font-variant-numeric:tabular-nums}
#credit-estimator{border-left:0!important;padding:0!important;margin-bottom:0!important;box-shadow:none!important;border:0!important;background:transparent!important;animation:v53rise .28s var(--v53-ease)}
.v54-rail #btn-extract{width:100%;font-size:14px;padding:12px;border-radius:var(--radius-sm)}
.v54-rail #low-credit-warning{margin:10px 0 0!important}
.v54-rail #extract-progress{margin-top:12px!important}
.v54-rail #extract-progress .card{margin-bottom:0;padding:12px;animation:none}

/* ---- Schedule cards: ALWAYS visible on every tab; dim when toggle off ---- */
#asin-schedule-block,#fkn-schedule-block,#msid-schedule-block,#multipin-schedule-block,#kw-schedule-block{display:block!important;transition:opacity .2s var(--v53-ease);background:transparent!important;padding:0!important}
#asin-schedule-block[style*="none"],#fkn-schedule-block[style*="none"],#msid-schedule-block[style*="none"],#multipin-schedule-block[style*="none"],#kw-schedule-block[style*="none"]{opacity:.55;filter:saturate(.6)}
.v54-sched-toggle{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-input);margin-bottom:12px;cursor:pointer;font-size:13px}
.v54-sched-toggle:hover{border-color:var(--border-light)}
.v54-sched-toggle input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.v54-sched-toggle strong{font-weight:600}
.v54-sched-toggle .hint{display:block;font-size:11px;color:var(--text-muted);font-weight:400}
#asin-schedule-block .form-input{margin-top:2px}
.v54-sched-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}

/* ---- Data fields card density ---- */
.v54-quickrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.v54-quickrow .row-tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-right:2px}

/* ============================================================
   v54.1 — FIELD TRAY COMPRESSION + ALIGNMENT PASS
   Category-as-row layout: label column left, chips flow right.
   Search + category pills (additive JS in the partial, nonce'd).
   ============================================================ */

/* ---- tools row: search + quick actions on one line ---- */
.v54-fields-tools{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.v54-search{position:relative;flex:1;min-width:170px}
.v54-search input{height:32px;font-size:12.5px;padding:0 10px 0 30px;width:100%}
.v54-search .v54-search-ic{position:absolute;left:9px;top:8px;width:15px;height:15px;color:var(--text-muted);pointer-events:none}
.v54-fields-tools .btn-xs{height:32px;display:inline-flex;align-items:center}

/* ---- preset row: slim, aligned ---- */
.v54-presets{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.v54-presets .row-tag{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}

/* ---- category filter pills ---- */
.v54-pills{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 6px;padding-bottom:2px;border-bottom:1px solid var(--border)}
.v54-pills::-webkit-scrollbar{display:none}
.v54-pill{height:28px;padding:0 11px;border:0;border-radius:999px;background:transparent;color:var(--text-muted);font-size:12px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background .12s var(--v53-ease),color .12s var(--v53-ease)}
.v54-pill:hover{background:var(--bg-input);color:var(--text-primary)}
.v54-pill.active{background:var(--bg-elevated);color:var(--text-primary);font-weight:600}

/* ---- THE COMPRESSION: category = one aligned row ---- */
.v54-workspace .fields-category{display:grid;grid-template-columns:108px minmax(0,1fr);gap:2px 12px;align-items:center;padding:3px 0;margin:0;border-bottom:1px solid var(--border);background:transparent;min-height:38px}
.v54-workspace .fields-category:last-of-type{border-bottom:0}
.v54-workspace .fields-category-title{padding:0;margin:0;font-size:11px;line-height:1.3;border:0;white-space:normal;align-self:center}
/* chips: natural width, inline flex — no clipped names, tags stay inline */
.v54-workspace .fields-grid{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center}
.v54-workspace .field-chip{display:inline-flex;align-items:center;gap:7px;width:auto;max-width:100%;min-height:28px;padding:2px 10px 2px 8px;font-size:12.5px;white-space:nowrap}
.v54-workspace .field-chip::before{width:14px;height:14px;border-radius:3.5px;font-size:8.5px;flex:none}
.v54-workspace .field-chip[data-slow="1"]::after{font-size:8px;padding:0 4px;margin-left:2px;flex:none}

/* tier headers: slim dividers between row groups */
.v54-workspace .tier-header{margin:8px 0 2px;padding:6px 0 2px;border-top:0}
.v54-workspace .tier-header:first-of-type{margin-top:0}

/* footer count row */
.v54-fields-foot{margin-top:10px;display:flex;justify-content:space-between;align-items:center}

/* ---- Products card alignment: columns visually level ---- */
.v54-setup textarea.form-input{min-height:176px}
.v54-settings{gap:10px 10px}
.v54-settings .form-input,.v54-settings .form-select{height:36px;font-size:12px}
.v54-asin-meta{margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:20px}

/* ---- cost hero (shared by ASIN estimator + FKN/MSID live cost) ---- */
.v54-cost-hero .v54-big{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1.15}

/* ---- Home: service tiles feel clickable, dense, alive ---- */
#tab-home .card{transition:transform .18s var(--v53-ease),box-shadow .18s var(--v53-ease),border-color .18s var(--v53-ease)}
#tab-home .card[onclick]{cursor:pointer}
#tab-home .card[onclick]:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border-light)}

/* ---- Auth pages: branded backdrop, elevated card ---- */
.auth-container{background:radial-gradient(900px 480px at 75% -10%,var(--accent-glow),transparent),radial-gradient(700px 420px at -10% 110%,var(--accent-glow),transparent),var(--bg-primary)}
.auth-box{box-shadow:var(--shadow-lg);border-radius:16px}
.auth-box .btn-primary{min-height:44px;font-size:14px}

/* ---- rail alignment ---- */
.v54-meta-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--text-muted);padding:8px 0;border-bottom:1px solid var(--border)}
.v54-meta-row:last-of-type{border-bottom:0}
.v54-meta-row strong{color:var(--text-secondary);font-weight:600}
.v54-rail .card{padding:14px 16px}
.v54-rail .card-header{margin-bottom:10px;padding-bottom:10px}
.v54-cost-hero{padding:0 0 8px;margin-bottom:8px}

/* ============================================================
   v55.1 — CLEAN FIELD TRAY: equal-width button grid
   Replaces category-row layout with flat 5-column grid.
   ============================================================ */
.v55-field-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:4px 0}
.v55-field-grid .field-chip{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 6px;width:auto;max-width:none;min-height:38px;
  border:1px solid var(--border);border-radius:var(--radius-xs);
  background:var(--bg-input);color:var(--text-secondary);
  font-size:12px;font-weight:500;cursor:pointer;user-select:none;
  white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis;
  transition:all .12s var(--v53-ease);
}
.v55-field-grid .field-chip:hover{border-color:var(--border-light);color:var(--text-primary);background:var(--bg-card-hover)}
.v55-field-grid .field-chip.selected{background:var(--accent-glow);border-color:var(--accent);color:var(--accent);font-weight:600}
.v55-field-grid .field-chip::before{
  content:'✓';width:14px;height:14px;border-radius:3px;
  border:1.5px solid var(--border);display:inline-flex;align-items:center;
  justify-content:center;font-size:9px;flex-shrink:0;color:transparent;
  transition:all .12s var(--v53-ease);
}
.v55-field-grid .field-chip.selected::before{background:var(--accent);border-color:var(--accent);color:#fff}
.v55-field-grid .field-chip[data-slow="1"]{border-left:2px solid #f59e0b;border-right:2px solid #f59e0b}
.v55-field-grid .field-chip.experimental-field{border-left:2px solid #8b5cf6;border-right:2px solid #8b5cf6}
.v55-field-grid .field-chip[data-slow="1"]::after{display:none}

/* ============================================================
   RESPONSIVE — tablet + mobile
   ============================================================ */

/* ---- tablet (≤1180px): stack workspace, keep sidebar ---- */
@media (max-width:1180px){
  .v54-workspace{grid-template-columns:1fr}
  .v54-rail{position:static}
  .v55-field-grid{grid-template-columns:repeat(5,1fr)}
}

/* ---- small tablet (≤900px): tighter field grid ---- */
@media (max-width:900px){
  .v55-field-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---- mobile (≤768px): full mobile layout ---- */
@media (max-width:768px){
  /* sidebar → hidden drawer, toggle via JS */
  .sidebar{position:fixed;left:-260px;top:0;height:100vh;width:250px;z-index:1000;
    transition:left .25s var(--v53-ease);box-shadow:none;overflow-y:auto}
  .sidebar.mobile-open{left:0;box-shadow:8px 0 30px rgba(0,0,0,.3)}
  .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999}
  .sidebar-overlay.active{display:block}

  /* top bar: add hamburger space */
  .top-bar{padding:0 12px;height:50px}
  .top-bar .logo{font-size:13px}
  .top-bar .user-info{gap:6px;font-size:11px}
  .top-bar .user-info .credit-badge{padding:3px 8px;font-size:10px}
  .mobile-menu-btn{display:flex!important;align-items:center;justify-content:center;
    width:36px;height:36px;border:1px solid var(--border);border-radius:var(--radius-xs);
    background:var(--bg-input);color:var(--text-secondary);font-size:18px;cursor:pointer;flex-shrink:0}

  /* app shell: no sidebar offset */
  .app-shell{display:block}

  /* content area: full width, tight padding */
  .content-area{padding:0}
  .content-area .main-content{padding:12px 10px}

  /* workspace: single column */
  .v54-workspace{grid-template-columns:1fr;gap:12px}
  .v54-setup{grid-template-columns:1fr}
  .v54-settings{grid-template-columns:1fr 1fr;gap:8px}

  /* field grid: 3 columns on mobile */
  .v55-field-grid{grid-template-columns:repeat(3,1fr);gap:4px}
  .v55-field-grid .field-chip{height:34px;font-size:11px;padding:0 4px}
  .v55-field-grid .field-chip::before{width:12px;height:12px;font-size:7px}

  /* search + tools */
  .v54-fields-tools{flex-wrap:wrap;gap:6px}
  .v54-search{min-width:100%;order:-1}

  /* rail: static, run button sticky */
  .v54-rail{position:static}
  .v54-rail .card{padding:12px}
  .v54-rail #btn-extract,
  .v54-rail [id$="-submit-btn"],
  .v54-rail [id^="btn-fkn"],
  .v54-rail [id^="btn-msid"],
  #multipin-submit-btn{
    position:sticky;bottom:8px;z-index:20;box-shadow:var(--shadow-lg);
    font-size:14px;padding:12px}

  /* cards: less padding */
  .card{padding:12px 14px;border-radius:var(--radius-sm)}
  .card-header{font-size:13px;padding-bottom:10px;margin-bottom:10px}

  /* schedule grid: stack */
  .v54-sched-grid{grid-template-columns:1fr}

  /* step badges: smaller */
  .v54-step{width:20px;height:20px;font-size:9px}

  /* textarea */
  .v54-setup textarea.form-input{min-height:120px}

  /* cost hero */
  #credit-cost{font-size:20px!important}
  .v54-big{font-size:20px}

  /* admin sidebar */
  .admin-sidebar{position:fixed;left:-260px;top:0;height:100vh;width:250px;z-index:1000;
    transition:left .25s var(--v53-ease)}
  .admin-sidebar.mobile-open{left:0;box-shadow:8px 0 30px rgba(0,0,0,.3)}
}

/* ---- small mobile (≤480px): even tighter ---- */
@media (max-width:480px){
  .v55-field-grid{grid-template-columns:repeat(2,1fr)}
  .v54-settings{grid-template-columns:1fr}
  .top-bar .user-info .username{display:none}
  .content-area .main-content{padding:8px 6px}
  .card{padding:10px 12px}
}