/* lib-barge-tile.css — ONE definition of what a barge tile looks like.
 *
 * A barge tile is the most repeated object in the product: 88×35, three rows
 * (number / load / owner band), mono 11px bold uppercase, with a clipped
 * corner for a rake end, an asterisk for a 200-footer, a D badge for damage
 * and a coloured edge strip when it's scheduled out. Peep Light's fleet board
 * and the customer portal both draw it, and until now each carried its own
 * copy of every one of those rules — identical clip-path polygons in two
 * files, the partial stripe written twice, the asterisk positioned twice.
 * Every "make the portal tile match the board" fix had to be made in both.
 *
 * This file is the single copy. It deliberately declares each rule under BOTH
 * apps' existing class names rather than forcing one to rename: the board's
 * markup carries .barge-rake-clip and the portal's carries .btile-x.clip, and
 * making them share a declaration is what stops them drifting. New markup can
 * use the neutral .bt-* names.
 *
 * Colours come from lib-tokens.css, which must load first.
 */

/* ── geometry ─────────────────────────────────────────────────────────── */
.bt {
  width: var(--tile-w); height: var(--tile-h);
  background: var(--surface); border: 1px solid var(--tile-border);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
  font-family: var(--tile-font); font-size: 11px; font-weight: 700;
  line-height: 1; text-transform: uppercase;
}
.bt-row {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 2px; white-space: nowrap; overflow: hidden; color: var(--tile-ink);
}
/* The label itself truncates, not the row — a centring flex parent won't
   ellipsis its own text, which is why an over-long name used to be clipped at
   BOTH ends instead of trailing off. */
.bt-row > span {
  position: relative; z-index: 40; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── load state ───────────────────────────────────────────────────────── */
.bt-loaded,  .tc-loaded            { background: var(--barge-loaded); }
.bt-empty,   .tc-empty             { background: var(--barge-empty); }
.bt-dirty,   .tc-dirty             { background: var(--barge-dirty); }
.bt-partial, .tc-partial, .barge-partial-stripe {
  background-image: repeating-linear-gradient(45deg,
    var(--barge-partial-a) 0 6px, var(--barge-partial-b) 6px 12px);
}
/* The board darkens a partial tile on hover; the portal's tiles aren't
   hover-interactive, so this stays board-only by selector. */
.barge-partial-stripe:hover {
  background-image: repeating-linear-gradient(45deg, #eab308 0 6px, #64748b 6px 12px);
}

/* ── rake end ─────────────────────────────────────────────────────────────
   A clipped lower-left corner suggests the angled rake. Flipped mirrors it to
   the lower right, for barges whose raked end is shown on the right. Both
   polygons existed twice with the same coordinates; they are now one rule. */
.bt-clip, .barge-rake-clip, .btile-x.clip {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 65%);
}
.bt-clip-flip, .barge-rake-clip-flip, .btile-x.clip-flip {
  clip-path: polygon(0 0, 100% 0, 100% 65%, 70% 100%, 0 100%);
}

/* ── 200-foot rake mark ───────────────────────────────────────────────────
   An asterisk seated in the bottom corner of the tile RECTANGLE, marking a
   longer-than-standard (195') rake. Drawn on the un-clipped wrapper so it
   shows over the cut-away notch instead of being clipped with it. The glyph's
   ink sits high in its em box, so the negative bottom pulls it down flush;
   the empty part of the line box overflows harmlessly. The white halo keeps
   it legible over any fill. */
.bt-200, .barge-rake-200, .t-ast {
  position: absolute; left: 1px; bottom: -8px; z-index: 25;
  font-size: 18px; font-weight: 800; color: var(--tile-ink);
  text-shadow: -1px 0 #fff, 1px 0 #fff, 0 -1px #fff, 0 1px #fff, 0 0 2px #fff;
  pointer-events: none;
}
/* The board's copy set line-height:1; the portal's did not, and the glyph is
   positioned off `bottom` either way. Kept as the board had it, since that is
   the one people look at all day. */
.bt-200, .barge-rake-200 { line-height: 1; }
.bt-200-flip, .barge-rake-200-flip, .t-ast-flip { left: auto; right: 1px; }

/* ── scheduled-out edge strip ─────────────────────────────────────────────
   The outer slice of the tile in the boat's badge colour, put on the side
   OPPOSITE the clipped corner so it never lands on the notch or the 200'
   asterisk. The inline style carries the boat's actual colour; this is only
   the fallback and the geometry. z-index lifts it above the row fills, which
   are static and therefore paint below positioned elements. */
.bt-strip, .t-strip {
  position: absolute; top: 0; bottom: 0; right: 0; width: 15%;
  z-index: 30; background: var(--tile-strip-default);
}

/* ── damage badge ─────────────────────────────────────────────────────────
   These two rules were byte-identical in styles.css (.tow-tile-dmg) and
   portal.html (.t-dmg) — the portal's even carried a comment saying "same
   geometry as the board's tow-tile D". Now they are the same rule.
   The colour is NOT --bad: this badge has always been rose-600 while --bad is
   a darker rose, and unifying them here would be a silent restyle. */
.bt-dmg, .tow-tile-dmg, .t-dmg {
  position: absolute; top: -5px; right: -4px; z-index: 50;
  background: var(--tile-dmg); color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 9999px; padding: 1px 5px; box-shadow: 0 0 0 1.5px #fff;
  pointer-events: none; line-height: 1.2;
}