/* style — the day's spend and where the money went.
   One section of the old style.css. The pieces load in filename order
   and that order is the cascade, so do not rearrange them. */
/* ---- Daily spend ------------------------------------------------------
   A thin strip pinned to the foot of the panel. Ambient by design: no
   heading and no card — just today, sitting over on the right where a total
   belongs.

   JUST THREE THINGS: the label, the number, and the button that opens the
   breakdown. A fill/progress track briefly lived here and was taken back
   out — the cap is an admin limit rather than a target, and a bar filling
   toward it made an ordinary working day read as progress toward trouble.
   The breakdown is one press away and has room to say what the cap is and
   how much of it is left; the strip itself does not need to.

   Shown whenever there is a budget or a spend to show — including from the
   disk when the team server has said nothing. */
#spendbar {
  position: sticky; bottom: 0; z-index: 9;
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding: 8px 12px;
  background: var(--bg); border-top: 1px solid var(--border);
}
.sp-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--text-faint); flex: none;
}

/* Past a hundred dollars the figure turns Covert crimson. A LEVEL, not a
   proportion: it means the same thing whatever anybody's cap is set to, so the
   strip needs nothing beside it to be read — which is why the fill and the "of
   $25" that briefly lived here are gone.

   var(--accent), not a red of its own. This was #ff5f57 — a perfectly good
   warning red, and one more colour in an app that has exactly one. The brand
   crimson is already what the panel uses to mean "look here", it is the only
   strong colour on that strip, and a second red three shades off it reads as
   a mistake rather than as a signal. Anything that wants the brand takes it
   from the token, so changing it stays a one-line job. */
.sp-read.hot { color: var(--accent); }
/* ---- WHERE THE DAY'S MONEY WENT ----

   The bar has always raised one question and answered none of it. This opens
   the day: the shape of it on the left — budget, what was made, and the split
   by model as bars or a pie — and the day itself on the right, every
   generation with its own thumbnail beside what it cost.

   A MODAL, NOT A POPOVER. The old panel was 330px anchored to the bar it came
   from, which is the right size for a total and the wrong size for a picture.
   Nothing here is anchored to anything: it takes the frame, because what it
   is showing is the whole day. */
#sp-break,
#sp-price {
  flex: none; background: none; border: 1px solid transparent; color: var(--text-faint);
  font-family: inherit; font-size: 10px; line-height: 1; cursor: pointer;
  padding: 3px 5px; border-radius: 3px;
  display: inline-flex; align-items: center;
}
#sp-break svg,
#sp-price svg { display: block; }
#sp-break:hover,
#sp-price:hover { color: var(--accent); border-color: var(--border); }

/* ---- WHAT EVERYTHING COSTS ----
   The price list wears the spend breakdown's frame -- same backdrop, same
   box, same head -- because it is the same kind of thing opened from the same
   place, and a second modal with its own manners would be a second thing to
   learn. Narrower, because it is a list of rates rather than a day of
   pictures. */
#price-modal {
  position: fixed; inset: 0; z-index: 430;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); padding: 18px;
}
.prm-box {
  width: 100%; max-width: 720px; height: 100%; max-height: 820px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  font-size: 12px; color: var(--text);
}
.prm-head {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.prm-title { font-size: 14px; font-weight: 700; flex: none; }
.prm-sub { color: var(--text-faint); font-size: 11px; flex: none; }
.prm-gap { flex: 1; }
.prm-find {
  flex: 0 1 220px; min-width: 0; height: 26px; box-sizing: border-box;
  padding: 0 8px; font: inherit; font-size: 11.5px;
  background: var(--surface-sunk); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
}
.prm-find:focus { outline: none; border-color: var(--border-dash); }
.prm-list { flex: 1; min-height: 0; overflow: auto; padding: 0 0 10px; }
.prm-gh {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 14px 6px; background: var(--card);
  font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); border-bottom: 1px solid var(--border);
}
.prm-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 14px; border-bottom: 1px solid var(--surface-sunk);
}
.prm-row:hover { background: var(--card-hover); }
.prm-nm { flex: 1 1 auto; min-width: 0; }
.prm-nm b { font-weight: 600; }
.prm-id { display: block; color: var(--text-faint); font-size: 10px; }
.prm-rate { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.prm-rate .r { display: block; }
.prm-rate .k { color: var(--text-faint); }
.prm-none { color: var(--text-faint); }
.prm-empty { padding: 20px 14px; color: var(--text-faint); }
.prm-foot {
  flex: none; padding: 9px 14px; border-top: 1px solid var(--border);
  color: var(--text-faint); font-size: 10.5px; line-height: 1.5;
}

#spend-modal {
  position: fixed; inset: 0; z-index: 430;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55); padding: 18px;
}
.spm-box {
  width: 100%; max-width: 1080px; height: 100%; max-height: 880px;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--border); border-radius: 3px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  font-size: 12px; color: var(--text);
}

.spm-head {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.spm-title { font-size: 14px; font-weight: 700; flex: none; }
.spm-gap { flex: 1; }
.spm-tot {
  flex: none; font-size: 19px; font-weight: 800; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.spm-x {
  flex: none; background: none; border: none; color: var(--text-dim); cursor: pointer;
  font-size: 22px; line-height: 1; padding: 0 2px;
}
.spm-x:hover { color: var(--accent); }

/* Three slices of the same question: this project today, everything today,
   and how the week is going. The answers differ enough that picking one for
   somebody is picking wrong two thirds of the time. */
.spm-scope, .spm-toggle { display: flex; gap: 4px; flex: none; }
.spm-sc, .spm-ct {
  appearance: none; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-faint); font: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: .2px; padding: 4px 11px;
}
.spm-sc:hover, .spm-ct:hover { color: var(--text-dim); }
.spm-sc.on, .spm-ct.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Two columns, and they wrap. A CEP panel can be docked at 400px wide, where
   a fixed two-up would put the chart off the edge — so the left column has a
   basis and is allowed to take the whole width when there is not room for
   both. */
.spm-body { flex: 1; display: flex; flex-wrap: wrap; min-height: 0; overflow: hidden; }
.spm-left {
  flex: 1 1 340px; min-width: 300px; max-width: 460px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; overflow-y: auto;
  border-right: 1px solid var(--border);
}
/* THE LIST HAS TO SCROLL, and that is entirely about min-height. A flex item
   defaults to min-height:auto, which means "at least as tall as my content" —
   so a column holding four hundred rows grows to four hundred rows tall,
   pushes past the bottom of the modal, and the overflow:auto on the list
   inside it never has a smaller box to scroll within. Every ancestor between
   the fixed-height box and the scroller needs it. */
.spm-right {
  flex: 1 1 420px; min-width: 280px; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.spm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }

/* WHAT YOU NARROWED IT TO, and the way back. Sticky at the top of the right
   column rather than in the header: it belongs to the list it is describing,
   and it should still be on screen when you are half way down. */
.spm-filter {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.spm-fl {
  font-size: 9px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--text-faint);
}
.spm-filter b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spm-clear {
  flex: none; appearance: none; cursor: pointer;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 3px;
  color: #fff; font: inherit; font-size: 10px; font-weight: 700; padding: 3px 12px;
}
.spm-clear:hover { filter: brightness(1.1); }

/* ---- the budget ---- */
.spm-budget { display: flex; flex-direction: column; gap: 6px; }
.spm-track { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.spm-track em { display: block; height: 100%; width: 0; background: var(--accent); }
.spm-track em.near { background: #d99a3c; }
.spm-track em.over { background: #d9544e; }
.spm-bt { color: var(--text-dim); font-size: 11px; line-height: 1.5; }
.spm-bt b { color: var(--text); font-weight: 700; }

/* ---- what was made ---- */
/* Stills and clips are priced an order of magnitude apart, so "forty
   generations" means nothing until you know four of them were video. */
/* THE TILES ARE THE FILTER. They were already the answer to "how much of this
   was video"; making them pressable turns that from a fact into a question you
   can ask of the list beside it, without inventing a second control that says
   the same words. All is one of them, and first, because getting the whole day
   back is the most common thing wanted after narrowing it. */
.spm-kinds { display: flex; flex-wrap: wrap; gap: 7px; }
.spm-kind {
  flex: 1 1 84px; display: flex; flex-direction: column; gap: 1px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 8px 9px; cursor: pointer;
}
.spm-kind:hover { border-color: var(--text-faint); }
.spm-kind.on { border-color: var(--accent); background: var(--card); }
.spm-kind.on .spm-kl { color: var(--accent); }
.spm-kn { font-size: 17px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spm-kl { font-size: 9px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--text-faint); }
.spm-kc { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.spm-chead { display: flex; align-items: center; gap: 8px; }
.spm-clabel { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-faint); }

/* ---- bars ---- */
.spm-bars { display: flex; flex-direction: column; gap: 9px; }
/* A bar is a question: press it and the list beside it narrows to that model.
   Padded and rounded so there is somewhere to hover, which is the only hint
   a chart gets to say it is pressable. */
.spm-bar {
  display: flex; flex-direction: column; gap: 4px;
  padding: 4px 6px; margin: -4px -6px; border-radius: 3px; cursor: pointer;
}
.spm-bar:hover { background: var(--bg); }
.spm-bar.on { background: var(--bg); box-shadow: inset 0 0 0 1px var(--accent); }
.spm-bl { display: flex; align-items: center; gap: 6px; min-width: 0; }
.spm-bl i { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.spm-bl b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spm-n {
  flex: none; background: var(--bg); border-radius: 3px; padding: 1px 6px;
  font-size: 9px; color: var(--text-faint);
}
.spm-c { flex: none; font-variant-numeric: tabular-nums; }
.spm-bar .spm-track { height: 5px; }

/* ---- pie ---- */
/* A donut rather than a full circle: the hole is where the total goes, which
   saves the eye a trip back to the header to find out what 100% was. */
.spm-pie { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.spm-pie svg { display: block; }
.spm-pbg { fill: none; stroke: var(--bg); stroke-width: 26; }
.spm-ptot { fill: var(--text); font-size: 19px; font-weight: 800; font-family: inherit; }
.spm-legend { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.spm-lg {
  display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px;
  padding: 3px 6px; border-radius: 3px; cursor: pointer;
}
.spm-lg:hover { background: var(--bg); }
.spm-lg.on { background: var(--bg); box-shadow: inset 0 0 0 1px var(--accent); }
.spm-lg i { flex: none; width: 8px; height: 8px; border-radius: 2px; }
.spm-lg b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the list ---- */
.spm-row {
  display: flex; align-items: center; gap: 10px; padding: 6px;
  border-radius: 3px; cursor: pointer;
}
.spm-row:hover { background: var(--bg); }
/* 16:9, because that is what nearly everything in here is, and a row of
   thumbnails that all agree on their shape reads as a list rather than as a
   pile. contain, never cover — a crop of somebody's generation to make a
   tidy grid is the panel deciding which part of their picture mattered. */
.spm-th {
  flex: none; width: 72px; height: 41px; border-radius: 3px; overflow: hidden;
  background: #000; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.spm-th img, .spm-th video {
  width: 100%; height: 100%; object-fit: contain; display: block; background: #000;
}
.spm-th.spm-glyph { color: var(--text-faint); font-size: 16px; background: var(--bg); }
.spm-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spm-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.spm-sub { font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums; }

.spm-empty { padding: 12px 4px; color: var(--text-dim); line-height: 1.5; }
.spm-note { color: var(--text-faint); }
.spm-foot {
  border-top: 1px solid var(--border); padding-top: 10px;
  color: var(--text-faint); font-size: 10px; line-height: 1.55;
}

/* The number is the point of the bar, so it is the size of a number you can
   read from where you sit rather than a footnote about one. */
.sp-read {
  flex: none; font-size: 15px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.2px;
}