/* ManifestETA glass.
 *
 * Linked by ManifestETA's own templates and nothing else. That is what keeps
 * it away from tcgcook: base.html is shared with tcgcook's customer pages, so
 * these rules live in a file only ManifestETA pages load, rather than in
 * base.html behind a scope that someone could forget to keep.
 *
 * base.html's .panel already blurs what is behind it; it was 76% opaque black,
 * so the glow behind the page never came through. These panels let it
 * through, in the share card's language — brighter along the top edge, a faint
 * highlight falling from it — so the dashboard and the card read as one thing.
 *
 * Every overlay that holds a panel sits on a 60-75% black scrim, and the order
 * drawer paints its own near-opaque background, so no glass panel ever ends up
 * with busy page text directly behind its own.
 */

/* ---------- panels ---------- */

.panel:not([data-order]) {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 38%,
                    rgba(255,255,255,0.02) 100%),
    rgba(14,14,24,0.44);
  border: 1px solid rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.18);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ---------- stat tiles ---------- */

/* Tinted by what they mean, as on the share card: a good number green-lit, a
   warning amber-lit. Driven by is-warn, which the page keeps in step with the
   numbers as filters change, so a tile that stops being a warning stops
   looking like one. */
[data-tile="landed"]:not(.is-warn) {
  background:
    linear-gradient(180deg, rgba(110,231,183,0.14) 0%, rgba(110,231,183,0.03) 60%),
    rgba(14,14,24,0.44);
  border-color: rgba(110,231,183,0.16);
  border-top-color: rgba(110,231,183,0.42);
}
[data-tile].is-warn {
  background:
    linear-gradient(180deg, rgba(251,191,36,0.14) 0%, rgba(251,191,36,0.03) 60%),
    rgba(14,14,24,0.44);
  border-color: rgba(251,191,36,0.18);
  border-top-color: rgba(251,191,36,0.45);
}

/* ---------- order cards ---------- */

/* .panel[data-order], never [data-order] alone. data-order names an order on
   three different things: the card, a row of the Table view, and the Open
   order button in a calendar day. A bare attribute selector dressed all three
   as cards — Table rows and that button picked up a card's background, blur
   and shadow. */

/* The same glass, a touch lighter so a long list stays calm, and tinted by
   the category the card sits in. (data-category, not data-orders: data-orders
   already means an order count on the drop and jig cards.)

   The tint is a variable each category block sets, rather than a rule per
   category, because a multi-item order is one card cut into lines and
   .order-group gives the first line its top border at a specificity a plain
   tint rule cannot reach. Colours only, never the border shorthand — a width
   here would redraw a seam through the middle of an order. */
/* The colour of an order, by what became of it. Set by a category block on
   the board, and by an element's own data-tone anywhere else — an opened past
   drop, a calendar day. orderTone() files both the same way, so an order is
   the same colour wherever it is seen. */
[data-category="open"],      [data-tone="open"]      { --row-tint: 167,139,250; --row-edge: .34; }
[data-category="quiet"],     [data-tone="quiet"]     { --row-tint: 251,191,36;  --row-edge: .36; }
[data-category="preorder"],  [data-tone="preorder"]  { --row-tint: 56,189,248;  --row-edge: .34; }
[data-category="delivered"], [data-tone="delivered"] { --row-tint: 110,231,183; --row-edge: .32; }
[data-category="cancelled"], [data-tone="cancelled"] { --row-tint: 248,113,113; --row-edge: .28; }

.panel[data-order] {
  background:
    linear-gradient(180deg, rgba(var(--row-tint, 255,255,255), 0.075) 0%,
                            rgba(var(--row-tint, 255,255,255), 0.01) 50%),
    rgba(14,14,24,0.40);
  border-color: rgba(255,255,255,0.08);
  border-top-color: rgba(var(--row-tint, 255,255,255), var(--row-edge, .16));
  /* No backdrop blur: a board lists dozens of these, one blur layer each, and
     scrolling the list stuttered. Behind them is only the aurora, which is
     blurred already, so the blur changed next to nothing on screen. */
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  transition: background-color .15s, border-color .15s;
}
/* The rule this has to beat is .order-group > .panel:first-child, which
   comes later in the page, so it needs the extra attribute to win. */
.order-group > .panel[data-order]:first-child {
  border-top-color: rgba(var(--row-tint, 255,255,255), var(--row-edge, .16));
}
/* The seam between two lines of one order, kept: the drop shadow above would
   otherwise replace .order-group's inset line. */
.order-group > .panel[data-order] + .panel[data-order] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
/* The row's own hover was a Tailwind background colour, which the rule above
   outranks; this brings it back. The gradient is an overlay, so a change of
   colour underneath still shows through it. */
.panel[data-order]:hover { background-color: rgba(34,34,52,0.55); }

/* ---------- past drops ---------- */

/* A drop card lit by how the night went: green at half landed or better, red
   below — the same line, and the same colours, as the pill in its corner.
   .panel[data-landed] rather than [data-landed] alone, to outrank the plain
   panel glass above; and the hover restated, because this outranks the
   card's Tailwind hover colour too. */
[data-landed="good"] { --drop-tint: 110,231,183; --drop-edge: .42; }
[data-landed="poor"] { --drop-tint: 248,113,113; --drop-edge: .40; }
.panel[data-landed] {
  background:
    linear-gradient(180deg, rgba(var(--drop-tint), 0.12) 0%, rgba(var(--drop-tint), 0.02) 55%),
    rgba(14,14,24,0.44);
  border-color: rgba(var(--drop-tint), 0.14);
  border-top-color: rgba(var(--drop-tint), var(--drop-edge));
}
.panel[data-landed]:hover { background-color: rgba(34,34,52,0.55); }

/* ---------- calendar ---------- */

/* Each day a small pane of the same glass. Days with something arriving sit a
   little brighter than empty ones, so the month reads as where the orders are
   before a single line in it is read. */
.cal-cell {
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-top-color: rgba(255,255,255,0.11);
  background: linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.006) 60%);
  transition: background-color .15s, box-shadow .15s;
}
.cal-cell.has-items {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 60%);
  border-color: rgba(255,255,255,0.09);
  border-top-color: rgba(255,255,255,0.17);
}
.cal-cell.has-items:hover { background-color: rgba(255,255,255,0.05); }
.cal-cell.is-past .cal-num { opacity: .5; }
/* A drop night: lit along the top, violet, like the badge in its corner. */
.cal-cell.is-drop { border-top-color: rgba(167,139,250,0.55); }
/* Today, lit the way a stat tile is — a wash from the top edge and a soft glow. */
.cal-cell.is-today {
  background: linear-gradient(180deg, rgba(167,139,250,0.20) 0%, rgba(167,139,250,0.05) 70%);
  border-color: rgba(167,139,250,0.30);
  border-top-color: rgba(167,139,250,0.70);
  box-shadow: 0 6px 22px rgba(139,92,246,0.22);
}
/* The open day: ringed, on top of whatever else it is. */
.cal-cell.is-open { box-shadow: 0 0 0 1.5px rgba(167,139,250,0.75), 0 6px 22px rgba(139,92,246,0.18); }

.cal-drop {
  font-size: 9px;
  line-height: 1.5;
  padding: 0 5px;
  border-radius: 9999px;
  color: #ede9fe;
  background: rgba(167,139,250,0.22);
  box-shadow: 0 0 10px rgba(167,139,250,0.35);
}
/* An order's colour as a dot, glowing a little, beside its line in a day. */
.cal-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 9999px;
  background: rgb(var(--row-tint, 148,163,184));
  box-shadow: 0 0 6px rgba(var(--row-tint, 148,163,184), 0.7);
}
/* An order in the opened day, tinted like its card on the board. */
.cal-entry {
  background: linear-gradient(180deg, rgba(var(--row-tint, 255,255,255), 0.07) 0%,
                                      rgba(var(--row-tint, 255,255,255), 0.01) 55%);
  border-color: rgba(255,255,255,0.07);
  border-top-color: rgba(var(--row-tint, 255,255,255), var(--row-edge, .16));
}

/* ---------- the glow behind ---------- */

/* base.html's glow, turned up a little so the frost has something to frost.
   Same shapes and motion; base.html still switches it off for reduced motion. */
.aurora-pulse { animation-name: mfxPulse; }
@keyframes mfxPulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .78; transform: scale(1.12); }
}