/* =========================================================================
   loading.css — what a panel looks like before its data arrives.

   Eleven places across the app said `Loading…` in muted grey and nothing else: the market
   list, the chart, the order book, the positions panel, the objectives list, the equity
   chart, the fills table, the checkout summary, the pay area, the dashboard's plan grid and
   the analytics panels. A grey word in an empty box tells somebody the same thing whether
   the data is two hundred milliseconds away or never coming, and against a remote database
   answering in seconds that is most of the time somebody spends on the page.

   `assets.css` already had the right idea — a shimmering row where the table will be — so
   this generalises that rather than inventing a second visual language. Same gradient, same
   1.5s sweep, same keyframe name.

   ## Why skeletons and not spinners

   A spinner says "something is happening". A skeleton says "a table is coming, about this
   wide, with about this many rows" — it holds the layout still, so the page does not jump
   when the data lands, and the shape is a promise the arriving content keeps.

   The one place a spinner is right is a control the user just pressed, where the question is
   "did my click register" rather than "what is coming" — so `.spin` exists for buttons and
   nothing else.
   ========================================================================= */

/* The sweep. `background-size:400%` gives the gradient room to travel; the keyframe moves it
   left so the highlight reads as passing across the surface rather than flickering. */
@keyframes shimmer{ to{ background-position:-135% 0; } }

.skel{
  display:block;
  border-radius:4px;
  background:linear-gradient(90deg,#111110 25%,#1A1917 37%,#111110 63%);
  background-size:400% 100%;
  animation:shimmer 1.5s linear infinite;
}

/* A line of text that has not arrived. The default is a body line; the modifiers are the
   two sizes that actually recur — a heading above a block, and a small label under one. */
.skel--line{ height:11px; }
.skel--head{ height:19px; border-radius:5px; }
.skel--small{ height:9px; border-radius:3px; }

/* Widths, so a skeleton is not a row of identical bars. Real text is ragged, and a block of
   equal-length bars reads as a loading graphic rather than as content about to appear. */
.skel--w40{ width:40%; }
.skel--w55{ width:55%; }
.skel--w70{ width:70%; }
.skel--w85{ width:85%; }

/* A rectangle standing in for something with area: a chart, a card, an image. */
.skel--block{ height:100%; min-height:120px; border-radius:10px; }

/* Stacked lines with the rhythm of prose or a list. */
.skel-stack{ display:flex; flex-direction:column; gap:10px; }
.skel-stack--tight{ gap:7px; }

/* A row of a table or a list: a label on the left, a figure on the right. */
.skel-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0;
  border-bottom:1px solid var(--hair, rgba(255,255,255,.06));
}
.skel-row:last-child{ border-bottom:0; }
.skel-row .skel:first-child{ flex:1; max-width:180px; }
.skel-row .skel:last-child{ width:64px; flex:none; }

/* Padding for a skeleton that fills a panel, so it does not sit against the panel's edge
   where the real content would have had its own. */
.skel-pad{ padding:16px 15px; }

/* ---------------------------------------------------------------- the spinner

   For a control that was just pressed, and nothing else. `currentColor` so it inherits the
   button it sits in rather than carrying its own palette. */
@keyframes spin{ to{ transform:rotate(360deg); } }

.spin{
  display:inline-block; width:15px; height:15px; flex:none;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:spin .7s linear infinite;
  vertical-align:-2px;
}

/* A button mid-request: dimmed, not disabled-looking, with the spinner where the label was.
   `cursor:progress` rather than `not-allowed` — the control is working, not refusing. */
.is-busy{ cursor:progress; opacity:.72; }

/* ---------------------------------------------------------------- reduced motion

   The shimmer is the whole point of a skeleton and also the thing most likely to bother
   somebody. Held at a static tint rather than removed: the SHAPE still does its job of
   holding the layout and promising what is coming, and only the movement stops. */
@media (prefers-reduced-motion: reduce){
  .skel{ animation:none; background:#141312; }
  .spin{ animation-duration:2s; }
}