/* ==========================================================================
   portal-core.css — Farmer Diamonds Operations Portal · chrome layer
   Masthead, deck-tags, function chips, card grid, hash tokens, filter fade.
   Sits on foundry-theme.css tokens; personas only set --accent / --deck-c.
   ========================================================================== */

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 26px 24px 48px;
}

/* ---- Masthead ------------------------------------------------------------
   Signature "signal rail": the mast is underlined by a hairline that burns
   in the deck hue at the left and cools to the panel edge color.        */
#deck-mast {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--edge);
  position: relative;
}
#deck-mast::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  height: 1px; width: 38%;
  background: linear-gradient(90deg,
    var(--deck-c, var(--accent, var(--edge2))),
    transparent);
}

.deck-tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--deck-c, var(--accent));
  background: color-mix(in oklab, var(--deck-c, var(--accent)) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--deck-c, var(--accent)) 40%, var(--edge));
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---- Function chips ------------------------------------------------------
   Fixed flavor hues on the orthogonal function axis; identical in every
   deck so the operator's eye can find "operate" regardless of wing.     */
.func-chip {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 9%, transparent);
  white-space: nowrap;
}
.func-operate   { color: #41e8ff; }
.func-observe   { color: #8b7bff; }
.func-configure { color: #2fd4c4; }
.func-account   { color: #e8c66a; }
.func-govern    { color: #ff4d5e; }

/* ---- Card grid ----------------------------------------------------------- */
.cards {
  display: grid;
  /* min(300px,100%) so a card never forces a viewport wider than the screen. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
/* Cards MUST be authored class="card panel" — .card alone has no background/border. */
.card {
  display: block;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, opacity .25s ease;
}
.card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--deck-c, var(--accent)) 55%, var(--edge));
}
.card:hover::before { right: 12%; }
.card h3 { color: var(--ink); margin-bottom: .35em; }
.card p { color: var(--dim); font-size: 13.5px; margin: 0; }

/* ---- Hash / identifier tokens -------------------------------------------- */
.hx {
  font-family: var(--mono);
  font-size: .92em;
  color: var(--dim);
  background: var(--glass);
  border: 1px solid var(--edge);
  border-radius: 5px;
  padding: 1px 6px;
}
.hx-full { word-break: break-all; }
.hx-empty { color: var(--faint); border-style: dashed; background: transparent; }

/* ---- Filter strip: non-matching stations recede, they don't vanish ------- */
body[class*="filter-fn-"] .card { opacity: .14; }
body.filter-fn-operate   .card[data-fn="operate"],
body.filter-fn-observe   .card[data-fn="observe"],
body.filter-fn-configure .card[data-fn="configure"],
body.filter-fn-account   .card[data-fn="account"],
body.filter-fn-govern    .card[data-fn="govern"] { opacity: 1; }

/* ---- Keyboard focus: always the deck hue, always visible ------------------ */
:focus-visible {
  outline: 2px solid var(--deck-c, var(--accent, var(--ink)));
  outline-offset: 2px;
  border-radius: 3px;
}

/* ==========================================================================
   Responsive layer — applies to every station via the shared chrome.
   Goal: the page body never scrolls sideways; wide content scrolls in place.
   ========================================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, canvas, svg, video { max-width: 100%; height: auto; }
/* Any element that opts into `.scroll-x` (wrappers around wide tables/charts). */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
  .wrap { padding: 18px 14px 40px; }
  /* Wide data tables scroll horizontally within their own box rather than
     pushing the whole page — no per-page markup change required. */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cards { grid-template-columns: 1fr; gap: 12px; }
  #deck-mast { gap: 8px; margin-bottom: 16px; }
  .deck-tag { font-size: 10.5px; letter-spacing: .1em; padding: 3px 9px; }
  .func-chip { font-size: 10px; }
}

@media (max-width: 400px) {
  .wrap { padding: 14px 10px 32px; }
}