/*
======================================================================
  5150 TOOLS  -  BOARDING ACTION: THE DECK PLAN  (boarding/boarding.css)
======================================================================
  Adds to ../shared/console.css and ../shared/guided.css. Uses the
  theme's colours (--ink, --accent, --paper...), so every colour scheme
  works.

  The plan is a grid of 7 columns by 5 rows: the Sections (boxes) with
  corridors (thin lines) between them, laid out like the book's maps:

            .   .   .   .  [5]  .   .
            .   .   .   .   |   .   .
           [1] --- [2] --- [3] --- [6]
            .   .   .   .   |   .   .
            .   .   .   .  [4]  .   .
======================================================================
*/

/* The screen is a little taller here, to fit the plan and the log. */
.term-screen.ba-screen { height: clamp(320px, 60vh, 720px); }

.ba-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  grid-template-rows: auto 14px auto 14px auto;
  max-width: 44rem;
  margin: 4px 0 12px;
}

/* One Section of the ship. */
.ba-sec {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 62px;
  padding: 4px 6px;
  border: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink-dim);
}
.ba-sec.is-seen { border-style: solid; color: var(--ink); }
.ba-sec.is-entry { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 40%, transparent); }
.ba-sec.is-boom { border-color: var(--accent); background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--accent) 20%, transparent) 6px 8px); }
.ba-num { font-family: var(--font-heading); font-size: 16px; line-height: 1; }
.ba-kind { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.ba-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.ba-tag, .ba-flag { padding: 0 4px; font-size: 11px; line-height: 16px; white-space: nowrap; }
.ba-you  { background: var(--ink); color: var(--paper); }
.ba-them { background: var(--accent); color: var(--paper); }
.ba-flag { border: 1px solid var(--accent); color: var(--accent); }

/* Where each Section sits. */
.ba-s5 { grid-column: 5; grid-row: 1; }
.ba-s1 { grid-column: 1; grid-row: 3; }
.ba-s2 { grid-column: 3; grid-row: 3; }
.ba-s3 { grid-column: 5; grid-row: 3; }
.ba-s6 { grid-column: 7; grid-row: 3; }
.ba-s4 { grid-column: 5; grid-row: 5; }

/* The corridors between them. */
.ba-h, .ba-v { position: relative; }
.ba-h::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); }
.ba-v::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); }
.ba-h12 { grid-column: 2; grid-row: 3; }
.ba-h23 { grid-column: 4; grid-row: 3; }
.ba-h36 { grid-column: 6; grid-row: 3; }
.ba-v5  { grid-column: 5; grid-row: 2; }
.ba-v4  { grid-column: 5; grid-row: 4; }

/* Phones: tighter boxes and corridors. */
@media (max-width: 560px) {
  .ba-plan { grid-template-columns: minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr) 8px minmax(0, 1fr); }
  .ba-sec { min-height: 54px; padding: 3px; }
  .ba-kind { font-size: 10px; letter-spacing: 0; }
  .ba-tag, .ba-flag { font-size: 10px; padding: 0 2px; }
}