/* Workspace preview (src/partials/workspace-preview.html).
   The eight views of the agents page's workspace carousel, rebuilt in HTML
   from the TruoDemo fixture. The mockup copies the demo app's own palette and
   stays light in both site themes: it is a picture of the product. */

.workspace-preview {
  --wp-blue: #3b6fd4;
  --wp-blue-dark: #2f59aa;
  --wp-blue-tint: #ebf1fc;
  --wp-ink: #161619;
  --wp-slate: #5a5a63;
  --wp-line: #e3e3e7;
  --wp-mist: #f7f7f8;
  --wp-rail: #1b2f63;
  --wp-ok: #0d6a5f;
  --wp-ok-tint: #e8f7f3;
  --wp-warn: #8a5a12;
  --wp-warn-tint: #fdf4e4;
  --wp-block: #a12c2c;
  --wp-block-tint: #fdeeee;
  --wp-idle: #6b6b74;
  --wp-idle-tint: #f0f0f2;
  --wp-mono: var(--truo-font-mono, ui-monospace, monospace);
  font-family: var(--truo-font-body);
  color: var(--wp-ink);
}
.workspace-preview * { box-sizing: border-box; }

/* ---------- view tabs above the frame */
.workspace-preview__tabs {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px 4px 0;
  background: var(--wp-mist);
  border: 1px solid var(--wp-line);
  border-bottom: 0;
  border-radius: var(--truo-radius-panel) var(--truo-radius-panel) 0 0;
}
.workspace-preview__tabs button {
  flex: 1 0 auto;
  min-height: 50px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--wp-slate);
  font: 600 11px/1.25 var(--wp-mono);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--truo-duration-fast), background var(--truo-duration-fast), border-color var(--truo-duration-fast);
}
.workspace-preview__tabs button span { display: block; margin-top: 4px; font: 600 12px/1.25 var(--truo-font-body); }
.workspace-preview__tabs button:hover { color: var(--wp-ink); background: #fff; }
.workspace-preview__tabs button[aria-selected="true"] { color: var(--wp-blue-dark); background: #fff; border-bottom-color: var(--wp-blue); }
.workspace-preview__tabs button:focus-visible { outline: 2px solid var(--wp-blue); outline-offset: -3px; }

/* ---------- app frame: rail + main */
.workspace-preview__app {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  min-height: 720px;
  overflow: hidden;
  border: 1px solid var(--wp-line);
  border-radius: 0 0 var(--truo-radius-panel) var(--truo-radius-panel);
  background: var(--wp-mist);
}
.workspace-preview__rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 10px 14px;
  background: var(--wp-rail);
  color: #fff;
}
.workspace-preview__rail-word { display: block; width: 128px; height: auto; margin: 2px 6px 16px; }
.workspace-preview__rail-mark { display: none; }
.workspace-preview__rail-ws {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
  padding: 9px 10px;
  border-radius: var(--truo-radius-control);
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255 / 70%);
  font-size: 10px;
}
.workspace-preview__rail-ws b { color: #fff; font-size: 12px; }
.workspace-preview__rail > small {
  margin: 12px 8px 4px;
  color: rgb(255 255 255 / 55%);
  font: 600 9.5px/1 var(--truo-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.workspace-preview__rail-icon {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 6px;
  color: rgb(255 255 255 / 86%);
  font-size: 12px;
  line-height: 1.2;
}
.workspace-preview__rail-icon svg { width: 16px; height: 16px; }
.workspace-preview__rail-icon em { color: rgb(255 255 255 / 55%); font: 500 10.5px/1 var(--truo-font-body); font-style: normal; }
.workspace-preview__rail-icon--on { background: var(--wp-blue); color: #fff; }
.workspace-preview__rail-icon--on em { color: #fff; }
.workspace-preview__rail-initials {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: auto 0 0 8px;
  border-radius: 50%;
  background: var(--wp-blue);
  font-size: 10px;
  font-weight: 700;
}

.workspace-preview__main { min-width: 0; display: flex; flex-direction: column; }
.workspace-preview__topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px;
  border-bottom: 1px solid var(--wp-line);
  background: #fff;
  font-size: 11px;
}
.workspace-preview__context { display: flex; align-items: center; gap: 7px; color: var(--wp-slate); font-weight: 500; }
.workspace-preview__context i { width: 7px; height: 7px; border-radius: 50%; background: var(--wp-ok); }
.workspace-preview__search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: min(240px, 30%);
  margin-left: auto;
  padding: 7px 11px;
  border: 1px solid var(--wp-line);
  border-radius: var(--truo-radius-control);
  background: var(--wp-mist);
  color: var(--wp-slate);
}
.workspace-preview__search svg { width: 14px; height: 14px; }
.workspace-preview__live {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--wp-ok-tint);
  color: var(--wp-ok);
  font-weight: 600;
  white-space: nowrap;
}
.workspace-preview__live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.workspace-preview__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp-blue-tint);
  color: var(--wp-blue-dark);
  font-size: 10px;
  font-weight: 700;
}

.workspace-preview__panel { display: flex; flex-direction: column; gap: 14px; flex: 1; padding: 18px 22px 22px; animation: workspace-in var(--truo-duration-slow) var(--truo-ease) both; }
.workspace-preview__panel[hidden] { display: none; }
@keyframes workspace-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.workspace-preview__footnote { margin: 14px 0 0; color: var(--truo-slate); font-size: 12px; line-height: 1.5; }

/* ---------- panel parts */
.wp-crumbs { display: flex; align-items: center; gap: 8px; color: var(--wp-slate); font-size: 12px; }
.wp-crumbs span::after { content: "/"; margin-left: 8px; color: var(--wp-line); }
.wp-crumbs b { color: var(--wp-ink); }
.wp-crumbs em, .wp-views em {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--wp-idle-tint);
  color: var(--wp-slate);
  font: 500 10.5px/1.5 var(--truo-font-body);
  font-style: normal;
}

.wp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.wp-head small, .wp-headline small {
  color: var(--wp-slate);
  font: 600 10px/1 var(--truo-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wp-head h3 { margin: 6px 0 4px; font: 650 20px/1.2 var(--truo-font-body); letter-spacing: -.01em; }
.wp-head p { margin: 0; color: var(--wp-slate); font-size: 12.5px; line-height: 1.45; }
.wp-asof { display: grid; gap: 4px; color: var(--wp-slate); font: 600 9.5px/1 var(--truo-font-body); letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.wp-asof b { color: var(--wp-ink); font: 500 12px/1 var(--wp-mono); letter-spacing: 0; text-transform: none; }

.wp-views { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.wp-views span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; color: var(--wp-ink); }
.wp-views .is-on { background: var(--wp-blue-tint); color: var(--wp-blue-dark); font-weight: 600; }
.wp-views--pills .is-on { background: var(--wp-blue); color: #fff; border-radius: 999px; }
.wp-views--pills .is-on em { background: rgb(255 255 255 / 22%); color: #fff; text-transform: uppercase; }

.wp-strip { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 8px 12px; border-radius: 6px; background: #eeeef1; color: var(--wp-slate); font: 500 10px/1.3 var(--truo-font-body); letter-spacing: .06em; text-transform: uppercase; }
.wp-strip b { margin-left: 6px; color: var(--wp-ink); font: 500 11px/1.3 var(--wp-mono); letter-spacing: 0; text-transform: none; }

.wp-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wp-metrics > div { padding: 12px 14px; border: 1px solid var(--wp-line); border-radius: var(--truo-radius-control); background: #fff; }
.wp-metrics--plain > div { padding: 2px 0; border: 0; background: none; }
.wp-metrics span { display: block; color: var(--wp-slate); font-size: 11.5px; }
.wp-metrics strong { display: block; margin: 4px 0 3px; font: 650 22px/1.1 var(--truo-font-body); letter-spacing: -.01em; }
.wp-metrics small { display: block; color: var(--wp-slate); font-size: 10.5px; }
.wp-metrics small.wp-warn { color: var(--wp-warn); }

.wp-card { border: 1px solid var(--wp-line); border-radius: var(--truo-radius-control); background: #fff; }
.wp-card--flush { overflow: hidden; }
.wp-cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 10px; }
.wp-cardhead h4 { margin: 0; font: 650 15px/1.2 var(--truo-font-body); }
.wp-cardhead p { margin: 3px 0 0; color: var(--wp-slate); font-size: 11.5px; }
.wp-card > .wp-views { padding: 0 12px 10px; }

/* tables are grids of rows so each view sets its own columns */
.wp-table { font-size: 12px; }
.wp-tr {
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--wp-line);
  box-shadow: inset 3px 0 transparent;
}
.wp-th { padding-block: 8px; border-top: 0; background: var(--wp-mist); color: var(--wp-slate); font-size: 11px; }
.wp-card:not(.wp-card--flush) .wp-th { border-top: 1px solid var(--wp-line); }
.wp-tr > span { min-width: 0; }
.wp-tr b { font-weight: 600; }
.wp-tr small { display: block; margin-top: 2px; color: var(--wp-slate); font-size: 10.5px; line-height: 1.35; }
.wp-tr small.wp-inline { display: inline; }
.wp-tr code { margin-right: 6px; padding: 1px 5px; border-radius: 4px; background: var(--wp-idle-tint); color: var(--wp-ink); font: 500 10px/1.4 var(--wp-mono); }
.wp-tr--block { box-shadow: inset 3px 0 var(--wp-block); }
.wp-tr--focus { background: #fbfcff; box-shadow: inset 3px 0 var(--wp-blue); }
.wp-mono { font-family: var(--wp-mono); font-size: 11.5px; letter-spacing: .02em; white-space: nowrap; }
.wp-break { overflow-wrap: anywhere; }
.wp-more { padding: 9px 16px 9px 120px; border-top: 1px solid var(--wp-line); background: var(--wp-mist); color: var(--wp-blue-dark); font-size: 11.5px; font-weight: 600; }
.wp-tablefoot { margin: 0; padding: 9px 16px; border-top: 1px solid var(--wp-line); background: var(--wp-mist); color: var(--wp-slate); font-size: 11px; }

.wp-table--queue .wp-tr { grid-template-columns: 92px minmax(0, 2.4fr) 92px 78px 92px; }
.wp-table--quotes .wp-tr { grid-template-columns: minmax(0, 2.2fr) 128px 112px 86px 96px; }
.wp-table--orders .wp-tr { grid-template-columns: minmax(0, 2.4fr) 86px 112px 104px 92px; }
.wp-table--reqs .wp-tr { grid-template-columns: minmax(0, 2fr) 76px 66px minmax(0, 1.5fr); }
.wp-table--ships .wp-tr { grid-template-columns: minmax(0, 2.2fr) 104px 112px minmax(0, 1fr); }
.wp-table--approvals .wp-tr { grid-template-columns: minmax(0, 1fr) 76px 184px; }

/* status chip, readiness ring, owner */
.wp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.wp-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.wp-chip--ok { background: var(--wp-ok-tint); color: var(--wp-ok); }
.wp-chip--warn { background: var(--wp-warn-tint); color: var(--wp-warn); }
.wp-chip--block { background: var(--wp-block-tint); color: var(--wp-block); }
.wp-chip--prog { background: var(--wp-blue-tint); color: var(--wp-blue-dark); }
.wp-chip--idle { background: var(--wp-idle-tint); color: var(--wp-idle); }

.wp-ready { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--wp-mono); }
.wp-ring { --c: var(--wp-line); width: 15px; height: 15px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p, 0) * 1%), var(--wp-line) 0); -webkit-mask: radial-gradient(circle, transparent 4.5px, #000 5px); mask: radial-gradient(circle, transparent 4.5px, #000 5px); }
.wp-ring--ok { --c: var(--wp-ok); }
.wp-ring--warn { --c: #d08a1f; }

.wp-person { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.wp-person i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--wp-blue); color: #fff; font: 700 8px/1 var(--truo-font-body); font-style: normal; }

/* dashboards */
.wp-headline { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 18px; }
.wp-headline h4 { margin: 6px 0 4px; font: 650 14px/1.2 var(--truo-font-body); }
.wp-headline strong { font: 650 24px/1 var(--truo-font-body); }
.wp-headline strong span { color: var(--wp-slate); font-size: 12px; font-weight: 500; }
.wp-headline p { margin: 5px 0 0; color: var(--wp-slate); font-size: 11.5px; }
.wp-gauge { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: conic-gradient(var(--wp-block) calc(var(--p) * 1%), var(--wp-line) 0); font-style: normal; }
.wp-gauge b { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #fff; font: 650 16px/1 var(--truo-font-body); }
.wp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wp-tile { padding: 13px 14px; border: 1px solid var(--wp-line); border-radius: var(--truo-radius-control); background: #fff; }
.wp-tile span { display: block; color: var(--wp-slate); font-size: 11.5px; }
.wp-tile strong { display: block; margin: 6px 0 4px; font: 650 22px/1.1 var(--truo-font-body); }
.wp-tile small { color: var(--wp-slate); font-size: 10.5px; }
.wp-tile--block { border-color: #f0c9c9; background: #fffafa; box-shadow: 0 0 0 3px #fdeeee; }
.wp-tile--warn { border-color: #f1dfbf; background: #fffdf8; }
.wp-tile--block span::after, .wp-tile--warn span::after { content: "!"; display: inline-grid; place-items: center; width: 13px; height: 13px; margin-left: 6px; border: 1.5px solid currentColor; border-radius: 50%; font: 700 8px/1 var(--truo-font-body); }
.wp-tile--block span::after { color: var(--wp-block); }
.wp-tile--warn span::after { color: #d08a1f; }

/* CRM board */
.wp-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: start; }
.wp-col { display: grid; gap: 8px; padding: 0 8px 10px; border: 1px solid var(--wp-line); border-radius: var(--truo-radius-control); background: #fbfbfc; }
.wp-colhead { display: grid; grid-template-columns: 1fr auto; padding: 10px 4px 4px; font-size: 12.5px; }
.wp-colhead span { font: 500 11.5px/1.3 var(--wp-mono); }
.wp-colhead small { color: var(--wp-slate); font-size: 10.5px; }
.wp-deal { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--wp-line); border-radius: 6px; background: #fff; font-size: 11px; }
.wp-deal > small { color: var(--wp-slate); font-size: 10px; }
.wp-deal b { font-size: 12.5px; line-height: 1.3; }
.wp-deal > span:not(.wp-person):not(.wp-btn) { color: var(--wp-slate); }
.wp-deal strong { margin: 2px 0; font: 650 17px/1.2 var(--truo-font-body); }
.wp-deal--won { border-color: var(--wp-blue); box-shadow: 0 0 0 3px var(--wp-blue-tint); }
.wp-btn { margin-top: 6px; padding: 6px; border: 1px solid var(--wp-line); border-radius: 6px; font-weight: 600; text-align: center; }

/* compliance spread */
.wp-spread { padding-bottom: 12px; }
.wp-spread .wp-cardhead { padding-bottom: 12px; }
.wp-bar { display: flex; gap: 2px; height: 7px; margin: 0 16px; overflow: hidden; border-radius: 4px; }
.wp-bar--block { background: #d24b4b; }
.wp-bar--warn { background: #d08a1f; }
.wp-bar--ok { background: var(--wp-ok); }
.wp-bar--idle { background: #c9c9cf; }
.wp-spread p { margin: 9px 16px 0; color: var(--wp-slate); font-size: 11.5px; }
.wp-spread p b { color: var(--wp-ink); }
.wp-spread p span { margin-inline: 8px; color: var(--wp-line); }

/* agent note, shared with the agents page cards */
.wp-agent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 13px 16px;
  border: 1px solid #cfdcf6;
  border-radius: var(--truo-radius-control);
  background: linear-gradient(90deg, #f3f7fe, #fff);
}
.wp-agent__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--wp-blue); color: #fff; }
.wp-agent__icon svg { width: 17px; height: 17px; }
.wp-agent > div > b { display: block; color: var(--wp-blue-dark); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.wp-agent strong { display: block; margin: 3px 0 2px; font-size: 13.5px; }
.wp-agent p { margin: 0; color: var(--wp-slate); font-size: 12px; line-height: 1.45; }

/* ---------- smaller frames */
@media (max-width: 1100px) {
  .workspace-preview__tabs button { min-width: 132px; }
  .workspace-preview__app { grid-template-columns: 62px minmax(0, 1fr); }
  .workspace-preview__rail { align-items: center; padding-inline: 8px; }
  .workspace-preview__rail-word, .workspace-preview__rail-ws, .workspace-preview__rail > small,
  .workspace-preview__rail-icon > span, .workspace-preview__rail-icon em { display: none; }
  .workspace-preview__rail-mark { display: block; width: 30px; height: 30px; margin-bottom: 14px; }
  .workspace-preview__rail-icon { grid-template-columns: 18px; padding: 9px; }
  .workspace-preview__rail-initials { margin-left: 0; }
  .wp-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .workspace-preview__app { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .workspace-preview__rail { display: none; }
  .workspace-preview__topbar { padding-inline: 14px; }
  .workspace-preview__search { display: none; }
  .workspace-preview__live { margin-left: auto; }
  .workspace-preview__panel { padding: 14px; }
  .wp-head { display: block; }
  .wp-asof { margin-top: 10px; text-align: left; }
  .wp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-hide-sm { display: none !important; }
  .wp-table--queue .wp-tr { grid-template-columns: 74px minmax(0, 1fr) 84px; }
  .wp-table--quotes .wp-tr { grid-template-columns: minmax(0, 1fr) 118px 76px; }
  .wp-table--orders .wp-tr { grid-template-columns: minmax(0, 1fr) 74px 96px; }
  .wp-table--orders .wp-tr > span:nth-child(3) { display: none; }
  .wp-table--reqs .wp-tr { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); }
  .wp-table--reqs .wp-tr > span:nth-child(2) { display: none; }
  .wp-table--ships .wp-tr { grid-template-columns: minmax(0, 1fr) 52px minmax(0, 0.9fr); }
  .wp-table--ships .wp-tr > span:nth-child(2) { display: none; }
  .wp-table--approvals .wp-tr { grid-template-columns: minmax(0, 1fr) 70px; }
  .wp-tr small.wp-inline { display: none; }
  .wp-tr .wp-chip { white-space: normal; }
  .wp-more { padding-left: 16px; }
  .wp-headline { grid-template-columns: auto minmax(0, 1fr); }
  .wp-headline > .wp-chip { grid-column: 1 / -1; justify-self: start; }
  .wp-agent { grid-template-columns: auto minmax(0, 1fr); }
  .wp-agent > .wp-chip { grid-column: 2; justify-self: start; }
}
@media (max-width: 480px) {
  .workspace-preview__context { font-size: 10px; }
  .wp-board, .wp-tiles { grid-template-columns: minmax(0, 1fr); }
  .wp-metrics strong, .wp-tile strong { font-size: 18px; }
  .wp-tr { padding-inline: 12px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-preview__panel { animation: none; }
}

/* Without JavaScript every view shows, one after another. */
html:not(.js) .workspace-preview__tabs { display: none; }
html:not(.js) .workspace-preview__panel[hidden] { display: flex; }
html:not(.js) .workspace-preview__panel + .workspace-preview__panel { border-top: 1px solid var(--wp-line); }
html:not(.js) .workspace-preview__app { border-top-left-radius: var(--truo-radius-panel); border-top-right-radius: var(--truo-radius-panel); }