/* ERP integrations, Live landscape (look-land.js): a day in a sample SAP landscape on the tool screen, in layers from the
   partners and systems through the gateways and middleware to the core. Where the stage is wide enough the counters stand
   beside the view and the screen keeps 16:9; elsewhere they sit under it and the screen grows to hold them. Systems are page
   text, placed from the start edge, over SVG links, the new plant's frame and the piles, and a canvas of moving messages,
   both of which mirror for rtl. */
.sc.lv { aspect-ratio: auto; }
.lv .sc-bar { flex-wrap: wrap; row-gap: var(--space-2); }
.lv-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
.lv-ctl button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding-block: var(--space-1-5);
  padding-inline: var(--space-2-5);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-pill);
  background: var(--tool-raise);
  color: var(--tool-text);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  white-space: nowrap;
  cursor: pointer;
}
.lv-ctl button:focus-visible, .lv-sys:focus-visible { outline: 2px solid var(--tool-top); outline-offset: 2px; }
.lv-btn svg { inline-size: 12px; block-size: 12px; fill: currentColor; }
.lv-btn svg:dir(rtl) { scale: -1 1; }

/* My fixes: a switch that turns green when on */
.lv-fix i { --lv-knob: 10px; position: relative; inline-size: 26px; block-size: 14px; border-radius: var(--r-pill); background: var(--tool-line); transition: background var(--dur-fast) var(--ease); }
.lv-fix i::after {
  content: '';
  position: absolute;
  inset-block-start: var(--space-0-5);
  inset-inline-start: var(--space-0-5);
  inline-size: var(--lv-knob);
  block-size: var(--lv-knob);
  border-radius: var(--r-round);
  background: var(--tool-muted);
  transition: inset-inline-start var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lv-fix[aria-checked="true"] { border-color: color-mix(in srgb, var(--tool-ok) 55%, transparent); }
.lv-fix[aria-checked="true"] i { background: color-mix(in srgb, var(--tool-ok) 32%, transparent); }
.lv-fix[aria-checked="true"] i::after { inset-inline-start: calc(100% - var(--lv-knob) - var(--space-0-5)); background: var(--tool-ok); }


/* The view and the counters: under it by default, beside it on a wide stage */
.lv { --lv-tall: 860px; }   /* a tall view's height until look-land.js sets what its rows need */
.lv-main { display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 0; }
.lv-view { aspect-ratio: 16 / 10; }
.lv.tall .lv-view { aspect-ratio: auto; block-size: var(--lv-tall); }
.lv-flat, .lv-dom { position: absolute; inset: 0; }
.lv-svg, .lv-cv { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.lv-svg:dir(rtl), .lv-cv:dir(rtl) { scale: -1 1; }

/* Links, the dotted ground, the new plant's frame round its ESB and ERP */
.lv-bg { fill: url(#lv-dots); }
.lv-svg pattern circle { fill: var(--tool-grid); }
.lv-lns path { fill: none; stroke: color-mix(in srgb, var(--tool-muted) 36%, transparent); transition: stroke var(--dur-fast) var(--ease); }
.lv-lns path.hot { stroke: color-mix(in srgb, var(--tool-top) 80%, transparent); }
.lv-plant { fill: color-mix(in srgb, var(--tool-raise) 45%, transparent); stroke: color-mix(in srgb, var(--tool-muted) 55%, transparent); stroke-width: 1; stroke-dasharray: 4 3; }

/* The piles: a mark a failed invoice, hollow where my fixes kept one; the queue of invoices waiting for their receipt */
.lv [data-c="uom"] { --c: var(--tool-ko); }
.lv [data-c="gr"] { --c: var(--tool-bot); }
.lv [data-c="other"] { --c: var(--tool-muted); }
.lv-pile path { opacity: 0; fill: var(--c); stroke: var(--c); stroke-width: 0; transition: opacity var(--dur-fast) var(--ease), fill-opacity var(--dur-slow) var(--ease); }
.lv-pile .f { opacity: 1; }
.lv-pile .g { opacity: .8; fill-opacity: 0; stroke-width: 1; }
.lv-pile[data-s="b"], .lv.end .lv-q { display: none; }
.lv.end .lv-pile[data-s="b"] { display: inline; }
.lv-pile, .lv-pl { transition: opacity var(--dur-base) var(--ease); }
.lv.end:not(.fixed) :is(.lv-pile, .lv-pl)[data-s="b"], .lv.end.fixed :is(.lv-pile, .lv-pl)[data-s="a"] { opacity: .45; }
.lv-q path { fill: none; stroke: var(--tool-bot); stroke-width: 1.2; opacity: 0; }
.lv-q path.on { opacity: 1; }
.lv-pl {
  position: absolute;
  margin: 0;
  color: var(--tool-muted);
  font-size: var(--text-2xs);
  line-height: var(--leading-tight);
  text-align: center;
}
.lv-pl b { display: block; color: var(--tool-text); font-family: var(--mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }

/* Systems by layer: the core raised, the integration platforms and the gateways edged in teal, the partners and systems
   plain. A ring fades out round one where something just happened: red for a failure, green for a mapped unit, teal for an
   invoice posted, white for a message held to retry */
.lv-sys {
  position: absolute;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-0-5);
  padding-block: var(--space-1-5);
  padding-inline: var(--space-2);
  border: 1px solid var(--tool-line);
  border-radius: var(--r-sm);
  background: var(--tool-panel);
  color: var(--tool-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
}
.lv-sys:is([data-kind="core"], [data-kind="int"]) b { white-space: nowrap; }
.lv-sys:not([data-id="sap"]) { grid-template-columns: minmax(0, 1fr); padding-inline: var(--space-1); }
.lv-sys b { font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-tight); hyphens: manual; }
.lv-sub { color: var(--tool-muted); font-family: var(--mono); font-size: var(--text-2xs); line-height: var(--leading-tight); }
.lv-sub i { font-style: normal; text-wrap: balance; }
.lv-sub i + i::before { content: ' · '; }
.lv-sub.stack i { display: block; }
.lv-sub.stack i + i::before { content: none; }
.lv-sys[data-kind="int"] { border-color: color-mix(in srgb, var(--tool-top) 40%, var(--tool-line)); }
.lv-sys[data-kind="gw"] { border-color: color-mix(in srgb, var(--tool-top) 22%, var(--tool-line)); }
.lv-sys[data-kind="core"] { background: var(--tool-raise); }
.lv-sys[data-id="sap"] { padding-block: var(--space-2-5); padding-inline: var(--space-3); }
.lv-sys[data-id="sap"] b { font-size: var(--text-sm); }
.lv-mods { display: flex; gap: var(--space-1); margin-block-start: var(--space-1); }
.lv-mods i {
  padding-block: var(--space-0-5);
  padding-inline: var(--space-1);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--tool-top) 14%, transparent);
  color: var(--tool-text);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-style: normal;
}
.lv-sys::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--space-1));
  border: 2px solid var(--k, var(--tool-top));
  border-radius: calc(var(--r-sm) + var(--space-1));
  opacity: var(--p, 0);
  pointer-events: none;
}
.lv-sys[data-k="fail"] { --k: var(--tool-ko); }
.lv-sys[data-k="fix"] { --k: var(--tool-ok); }
.lv-sys[data-k="retry"] { --k: var(--tool-silk); }
.lv-sys.hot, .lv-sys.say { border-color: var(--tool-top); }
.lv-sys[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--tool-top); }
.lv:is(.tall, .snug) .lv-sys:not([data-id="sap"]) b { font-size: var(--text-2xs); }
/* Too narrow even then, on the smallest phones: every name may wrap, balanced */
.lv.tall.snug .lv-sys b { white-space: normal; text-wrap: balance; }

/* A callout: in the band over its system in a wide view, across the top in a tall one */
.lv-call {
  position: absolute;
  inset-block-start: var(--space-2-5);
  z-index: 2;
  max-inline-size: min(360px, calc(100% - 2 * var(--space-3-5)));
  margin: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--tool-top) 40%, var(--tool-line));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tool-panel) 94%, transparent);
  color: var(--tool-text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  text-wrap: pretty;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease);
}
.lv-call.on { opacity: 1; }
.lv-call.band { inset-inline: var(--space-2-5); max-inline-size: none; }
.lv-call b { color: var(--tool-top); font-weight: var(--weight-semibold); }
.lv-call[data-k="uom"] b { color: var(--tool-ko); }
.lv-call[data-k="gr"] b { color: var(--tool-bot); }
.lv-call:is([data-k="mapped"], [data-k="post"]) b { color: var(--tool-ok); }
.lv-call:is([data-k="throttle"], [data-k="backout"], [data-k="resend"]) b { color: var(--tool-silk); }

/* The counters: the clock over the day's hours, the day's counts, and the flows of the system pointed at */
.lv-hud {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.5fr);
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-3);
  padding-inline: var(--space-3-5);
  border-block-start: 1px solid var(--tool-line);
  background: var(--tool-panel);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.lv.tall .lv-hud { grid-template-columns: auto minmax(0, 1fr); }
.lv.tall .lv-flows { grid-column: 1 / -1; }
.lv-clock { display: grid; gap: var(--space-1-5); align-content: start; }
.lv-t { font-family: var(--mono); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-none); font-variant-numeric: tabular-nums; }
.lv-hours { inline-size: 96px; block-size: 12px; }
.lv-hours rect { fill: var(--tool-line); }
.lv-hours rect.on { fill: color-mix(in srgb, var(--tool-top) 70%, transparent); }
.lv-n { display: grid; gap: var(--space-1); align-content: start; margin: 0; }
.lv-n div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.lv-n dt { display: inline-flex; align-items: center; gap: var(--space-1-5); color: var(--tool-muted); }
.lv-n dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lv-f dt { color: var(--tool-text); }
.lv-f dd { color: var(--tool-ko); }
.lv-c { padding-inline-start: var(--space-3); }
.lv-c svg { inline-size: 8px; block-size: 8px; fill: var(--c); }
.lv-flows { container-type: inline-size; min-inline-size: 0; }
.lv-flows ul { display: grid; gap: var(--space-1-5); margin: 0; margin-block-start: var(--space-1-5); padding: 0; list-style: none; }
.lv-flows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); }
.lv-flows b { font-family: var(--mono); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-align: end; }
.lv-flows small { grid-column: 1 / -1; color: var(--tool-muted); font-family: var(--mono); font-size: var(--text-2xs); }
.lv-flows .lv-more { color: var(--tool-muted); }
@container (min-width: 320px) {
  .lv-flows li { grid-template-columns: minmax(0, 1fr) auto 5ch; }
  .lv-flows small { grid-column: 2; grid-row: 1; align-self: center; }
  .lv-flows b { grid-column: 3; grid-row: 1; }
}
@container stage (min-width: 1100px) {
  .sc.lv { aspect-ratio: 16 / 9; }
  .lv-main { grid-template-columns: minmax(0, 1fr) 248px; }
  .lv-view { aspect-ratio: auto; }
  .lv-hud { display: flex; flex-direction: column; gap: var(--space-4); overflow: hidden; border-block-start: 0; border-inline-start: 1px solid var(--tool-line); }
}

/* The status line: the hint, and what the moving dots are */
.lv-status { flex-wrap: wrap; row-gap: var(--space-1); white-space: normal; }
.lv-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-inline-start: auto; }
.lv-key span { display: inline-flex; align-items: center; gap: var(--space-1-5); white-space: nowrap; }
.lv-key i { inline-size: 7px; block-size: 7px; border-radius: var(--r-round); background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.lv-key [data-k="inv"] { --c: var(--tool-top); }
.lv-key [data-k="msg"] { --c: var(--tool-pad); }
.lv-key [data-k="map"] { --c: var(--tool-ok); }
.lv-key [data-k="held"] { --c: var(--tool-silk); }

/* Hover only where there's a pointer that hovers: on a touch screen it would stay on what was tapped */
@media (hover: hover) {
  .lv-ctl button:hover { border-color: color-mix(in srgb, var(--tool-top) 45%, var(--tool-line)); }
  .lv-sys:hover { border-color: var(--tool-top); }
}
@media (pointer: coarse) {
  .lv-ctl button { min-block-size: var(--tap); }
}
@media (prefers-reduced-motion: reduce) {
  .lv-ctl button, .lv-fix i, .lv-fix i::after, .lv-lns path, .lv-pile, .lv-pile path, .lv-pl, .lv-sys, .lv-call { transition: none; }
}