/* hf-studio Panel 4 — History Binance Open Orders row layout
 * Reference: Binance Spot trading Open Orders / Order History panel
 *   Live URL (auth gate): https://www.binance.com/en/my/orders/exchange/openorder
 *   Public reference colors widely documented in Binance Spot/Futures interface:
 *     BUY/up   = #0ECB81 (green)
 *     SELL/down= #F6465D (red)
 *     Warning  = #F0B90B (yellow/gold)
 *   WebFetch evidence (2026-05-11): Binance Academy/Research/Brand pages all
 *     returned no design-spec content (SPA + WAF). Fallback = public brand colors.
 *
 * Token prefix: --hf-row-* (panel 4 owned). app.css 의 --hf-* 변수는 read-only 참조.
 * Magic number 0건 의무 — color/spacing/timing 전부 token.
 * 박제: feedback_legacy_magic_number_inherit_audit_required_2026_05_10
 *       feedback_competitive_analysis_no_web_fact_check_drift
 */

:root {
  /* row geometry */
  --hf-row-h-desktop: 44px;
  --hf-row-h-mobile-line: 28px;
  --hf-row-padding-x: 12px;
  --hf-row-padding-y: 6px;
  --hf-row-gap: 10px;

  /* status colors (Binance public brand) */
  --hf-row-status-up: #0ECB81;
  --hf-row-status-down: #F6465D;
  --hf-row-status-warn: #F0B90B;
  --hf-row-status-muted: var(--hf-text-3);

  /* row state */
  --hf-row-bg: transparent;
  --hf-row-bg-hover: var(--hf-bg-l3);
  --hf-row-bg-expanded: var(--hf-bg-l3);
  --hf-row-border-divider: var(--hf-border-1);
  --hf-row-border-active-w: 2px;
  --hf-row-border-active-c: var(--hf-accent);

  /* visual atoms */
  --hf-row-radius: 4px;
  --hf-row-thumb-size: 32px;
  --hf-row-chip-h: 20px;
  --hf-row-kebab-w: 24px;

  /* typography */
  --hf-row-font-meta: 0.75rem;
  --hf-row-font-time: 0.7rem;

  /* motion */
  --hf-row-expand-anim-ms: 220ms;
  --hf-row-hover-anim-ms: 120ms;

  /* column widths (desktop) */
  --hf-row-col-time: 96px;
  --hf-row-col-kind: 28px;
  --hf-row-col-model: 180px;
  --hf-row-col-status: 80px;
  --hf-row-col-cost: 70px;
  --hf-row-col-thumb: 40px;
  --hf-row-col-kebab: var(--hf-row-kebab-w);
}

/* =============================================================
   List container
   ============================================================= */
.hf-row-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hf-row-border-divider);
  border-bottom: 1px solid var(--hf-row-border-divider);
  background: var(--hf-row-bg);
}

/* =============================================================
   Row (desktop = single 44px line, 8 columns)
   ============================================================= */
.hf-row {
  display: grid;
  grid-template-columns:
    var(--hf-row-col-time)
    var(--hf-row-col-kind)
    var(--hf-row-col-model)
    var(--hf-row-col-status)
    var(--hf-row-col-cost)
    var(--hf-row-col-thumb)
    minmax(0, 1fr)
    var(--hf-row-col-kebab);
  align-items: center;
  gap: var(--hf-row-gap);
  height: var(--hf-row-h-desktop);
  padding: 0 var(--hf-row-padding-x);
  border-bottom: 1px solid var(--hf-row-border-divider);
  border-left: var(--hf-row-border-active-w) solid transparent;
  background: var(--hf-row-bg);
  cursor: pointer;
  transition:
    background var(--hf-row-hover-anim-ms) ease,
    border-left-color var(--hf-row-hover-anim-ms) ease;
  font-size: var(--hf-row-font-meta);
  color: var(--hf-text-2);
}
.hf-row:last-child { border-bottom: none; }
.hf-row:hover { background: var(--hf-row-bg-hover); }
.hf-row.is-expanded {
  background: var(--hf-row-bg-expanded);
  border-left-color: var(--hf-row-border-active-c);
}

.hf-row:focus-visible {
  outline: 2px solid var(--hf-accent);
  outline-offset: -2px;
}

/* =============================================================
   Cells
   ============================================================= */
.hf-row-cell {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hf-row-time {
  font-size: var(--hf-row-font-time);
  color: var(--hf-text-3);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.hf-row-time .hf-row-time-d { color: var(--hf-text-4); font-size: 0.65rem; }
.hf-row-kind {
  font-size: 0.95rem;
  text-align: center;
  opacity: 0.85;
}
.hf-row-model {
  color: var(--hf-text-2);
  font-weight: 500;
}
.hf-row-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--hf-row-chip-h);
  padding: 0 8px;
  border-radius: var(--hf-row-radius);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: -0.1px;
  border: 1px solid transparent;
}
.hf-row-status.is-done {
  color: var(--hf-row-status-up);
  border-color: color-mix(in oklab, var(--hf-row-status-up) 38%, transparent);
  background: color-mix(in oklab, var(--hf-row-status-up) 14%, transparent);
}
.hf-row-status.is-failed,
.hf-row-status.is-cancelled {
  color: var(--hf-row-status-down);
  border-color: color-mix(in oklab, var(--hf-row-status-down) 38%, transparent);
  background: color-mix(in oklab, var(--hf-row-status-down) 14%, transparent);
}
.hf-row-status.is-running,
.hf-row-status.is-pending {
  color: var(--hf-row-status-warn);
  border-color: color-mix(in oklab, var(--hf-row-status-warn) 38%, transparent);
  background: color-mix(in oklab, var(--hf-row-status-warn) 14%, transparent);
}

.hf-row-cost {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--hf-text-2);
}
.hf-row-cost .hf-row-cost-unit {
  color: var(--hf-text-4);
  font-size: 0.65rem;
  margin-left: 2px;
}
.hf-row-cost.is-free {
  color: var(--hf-row-status-up);
}

.hf-row-thumb {
  width: var(--hf-row-thumb-size);
  height: var(--hf-row-thumb-size);
  border-radius: var(--hf-row-radius);
  overflow: hidden;
  background: var(--hf-bg-l2);
  border: 1px solid var(--hf-border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--hf-text-4);
}
.hf-row-thumb img,
.hf-row-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hf-row-body {
  color: var(--hf-text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hf-row-kebab {
  width: var(--hf-row-kebab-w);
  height: var(--hf-row-kebab-w);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--hf-row-radius);
  color: var(--hf-text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}
.hf-row-kebab:hover {
  background: var(--hf-bg-l4);
  color: var(--hf-text-1);
}

/* =============================================================
   Expanded detail area — full _job_card.html re-render
   ============================================================= */
.hf-row-detail {
  background: var(--hf-row-bg-expanded);
  border-bottom: 1px solid var(--hf-row-border-divider);
  border-left: var(--hf-row-border-active-w) solid var(--hf-row-border-active-c);
  padding: 14px 18px 18px 18px;
  animation: hfRowExpand var(--hf-row-expand-anim-ms) ease-out;
}
.hf-row-detail[hidden] { display: none; }

@keyframes hfRowExpand {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   Empty state
   ============================================================= */
.hf-row-empty {
  text-align: center;
  padding: 64px 20px;
  color: var(--hf-text-3);
}
.hf-row-empty .hf-row-empty-title {
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: var(--hf-text-3);
}
.hf-row-empty .hf-row-empty-hint {
  font-size: var(--hf-row-font-meta);
  color: var(--hf-text-4);
}

/* =============================================================
   Mobile (<=640) — 2-line compact (line1: status·model·cost / line2: time·body)
   ============================================================= */
@media (max-width: 640px) {
  .hf-row-list {
    display: grid;
    gap: 10px;
    border: 0;
    background: transparent;
  }
  .hf-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "thumb model  model  status"
      "thumb body   body   body"
      "thumb time   cost   kebab";
    height: auto;
    min-height: 78px;
    padding: 10px;
    column-gap: 8px;
    row-gap: 5px;
    border: 1px solid var(--hf-row-border-divider);
    border-left: 1px solid var(--hf-row-border-divider);
    border-radius: 16px;
    background: color-mix(in oklab, var(--hf-bg-l2) 82%, transparent);
    box-shadow: 0 10px 28px rgba(0,0,0,.16);
  }
  .hf-row:last-child { border-bottom: 1px solid var(--hf-row-border-divider); }
  .hf-row:hover { background: color-mix(in oklab, var(--hf-bg-l3) 88%, transparent); }
  .hf-row.is-expanded {
    border-color: color-mix(in oklab, var(--hf-accent) 42%, var(--hf-row-border-divider));
    border-left-color: color-mix(in oklab, var(--hf-accent) 42%, var(--hf-row-border-divider));
  }
  .hf-row-time      { grid-area: time; flex-direction: row; gap: 6px; align-items: center; color: var(--hf-text-4); }
  .hf-row-time .hf-row-time-d { font-size: 0.65rem; }
  .hf-row-kind      { display: none; }
  .hf-row-model     { grid-area: model; min-width: 0; font-size: 0.82rem; display: flex; align-items: center; gap: 6px; font-weight: 560; color: var(--hf-text-1); }
  .hf-row > .hf-row-cell:nth-of-type(4) { grid-area: status; justify-self: end; }
  .hf-row-cost      { grid-area: cost; }
  .hf-row-thumb     {
    grid-area: thumb;
    display: flex;
    width: 50px;
    height: 58px;
    border-radius: 13px;
    align-self: stretch;
    font-size: 1rem;
  }
  .hf-row-body      {
    grid-area: body;
    font-size: 0.74rem;
    line-height: 1.3;
    color: var(--hf-text-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
  }
  .hf-row-kebab     { grid-area: kebab; }
  .hf-row-detail {
    margin: -4px 0 6px;
    border: 1px solid var(--hf-row-border-divider);
    border-left: 1px solid var(--hf-row-border-divider);
    border-radius: 16px;
  }
}

/* =============================================================
   Reduced motion — disable expand animation + hover transitions
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .hf-row              { transition: none; }
  .hf-row-detail       { animation: none; }
}