/* portal-action.css — supplier-portal click → complete micro-interaction (homepage).
   Scoped to .bac so the logistics/client panes (plain .browser-action) are untouched.
   Replaces the static .browser-action card for the supplier pane only; replicates its
   paper background + bottom border, with padding moved onto each sliding panel. */

.bac {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.bac-track {
  display: flex;
  width: 200%;
  will-change: transform, opacity;
}

.bac-panel {
  width: 50%;
  flex: 0 0 50%;
  box-sizing: border-box;
  padding: 20px;
}

/* supplier "before" status keeps the gold accent (matches globals) */
.bac .browser-action-sub { color: #B08D57; }

/* CTA — a non-interactive span styled as the portal button; click feedback on phase 2 */
.bac-cta {
  position: relative;
  cursor: default;
  transition: transform .12s ease, box-shadow .12s ease;
}
.bac-cta.is-clicked {
  transform: scale(.96);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .28);
}

/* ── complete panel ── */
.bac-done-title {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bac-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green, #2f7a4d);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  flex: none;
}
.bac .bac-done-sub { color: var(--green, #2f7a4d); }
.bac-done-sync {
  font-size: 14px;
  color: var(--muted-2, #737373);
  margin-top: 12px;
  font-variant-numeric: tabular-nums;
}

/* ── simulated cursor ── */
/* Position + opacity are driven inline (measured target); transitions live here. */
.bac-cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: translate(0, 0);
  transition: transform .72s cubic-bezier(.45, 0, .25, 1), opacity .3s ease;
  pointer-events: none;
  z-index: 3;
}
.bac-cursor svg {
  display: block;
  transition: transform .12s ease;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}
.bac-cursor.is-click svg { transform: scale(.88); }

.bac-cursor-ring {
  position: absolute;
  inset: -7px;
  border: 2px solid var(--accent, #B08D57);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
}
.bac-cursor.is-click .bac-cursor-ring { animation: bacClick .42s ease-out; }
@keyframes bacClick {
  0%   { opacity: .6; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .bac-track { transform: translateX(0) !important; opacity: 1 !important; transition: none !important; }
  .bac-cursor { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Logistics: 3-panel revise → confirm flow (.lac). Scoped so it never touches
   the supplier (.bac) or the static client pane. Reuses .bac-cursor visuals.
   ───────────────────────────────────────────────────────────────────────── */
.lac {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.lac-track { display: flex; width: 300%; will-change: transform, opacity; }
.lac-panel {
  width: 33.3333%;
  flex: 0 0 33.3333%;
  box-sizing: border-box;
  padding: 20px;
  min-height: 190px;
}

/* CTA buttons — non-interactive spans styled as portal buttons; click feedback */
.lac-cta,
.lac-confirm { position: relative; cursor: default; transition: transform .12s ease, box-shadow .12s ease; }
.lac-cta.is-clicked,
.lac-confirm.is-clicked { transform: scale(.96); box-shadow: 0 0 0 3px rgba(176, 141, 87, .28); }

/* revise form + inline calendar (square corners — no border-radius) */
.lac-cal { margin: 10px 0 16px; }
.lac-cal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.lac-cal-month { font-size: 15px; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.lac-cal-sel { font-size: 13px; color: var(--muted); }
.lac-cal-sel strong { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.lac-cal-wd,
.lac-cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lac-cal-wd { margin-bottom: 4px; }
.lac-cal-wdlabel {
  text-align: center;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 0;
}
.lac-cal-blank { display: block; }
.lac-cal-day {
  text-align: center;
  font-size: 13px;
  color: var(--ink);
  padding: 6px 0;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
  cursor: default;
  transition: background .15s ease, color .15s ease;
}
.lac-cal-day.is-sel { background: var(--accent); color: #fff; font-weight: 600; }

/* confirmed panel */
.lac-done-title { font-size: 17px; font-weight: 600; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.lac-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green, #2f7a4d);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  flex: none;
}
.lac-done-sync { font-size: 14px; color: var(--muted-2, #737373); margin-top: 12px; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .lac-track { transform: translateX(0) !important; opacity: 1 !important; transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Client: animated order-status tracker (.ctk). Replaces the static action
   block in the client pane. Uses the client pane accent (#1F1F1F). Square
   throughout; the milestone dots are circles (matches the order-details tracker).
   ───────────────────────────────────────────────────────────────────────── */
.ctk {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.ctk-track { display: flex; width: 200%; will-change: transform, opacity; }
.ctk-panel { width: 50%; flex: 0 0 50%; box-sizing: border-box; padding: 20px; }
.ctk-cta { position: relative; cursor: default; transition: transform .12s ease, box-shadow .12s ease; }
.ctk-cta.is-clicked { transform: scale(.96); box-shadow: 0 0 0 3px rgba(31, 31, 31, .22); }
.ctk-rail { position: relative; margin: 20px 0 16px; }
.ctk-railbg { position: absolute; top: 8px; height: 2px; background: var(--line); }
.ctk-railfill {
  position: absolute;
  top: 8px;
  height: 2px;
  background: #1F1F1F;
  width: 0;
  transition: width 1.3s cubic-bezier(.4, 0, .2, 1);
}
.ctk-nodes { position: relative; display: flex; }
.ctk-node { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ctk-dot {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: transparent;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.ctk-rail.is-on .ctk-node--done .ctk-dot { background: #1F1F1F; border-color: #1F1F1F; color: #fff; }
.ctk-rail.is-on .ctk-node--current .ctk-dot { border-color: #1F1F1F; }
.ctk-node--current .ctk-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #1F1F1F;
  opacity: 0;
}
.ctk-rail.is-on .ctk-node--current .ctk-dot::after { animation: ctkPulse 1.7s ease-out infinite; }
@keyframes ctkPulse {
  0%   { opacity: .5; transform: scale(.7); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0; }
}
.ctk-label {
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: var(--muted);
  max-width: 66px;
  transition: color .3s ease;
}
.ctk-rail.is-on .ctk-node--done .ctk-label { color: var(--ink); }
.ctk-rail.is-on .ctk-node--current .ctk-label { color: var(--ink); font-weight: 600; }
.ctk-status { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .ctk-railfill { transition: none; }
  .ctk-dot { transition: none; }
  .ctk-node--current .ctk-dot::after { animation: none; }
}