/* ==========================================================================
   Paracelsus Triage Board — style sheet
   No external fonts/CDNs. System font stacks only, chosen deliberately:
     --font-display  serif wordmark / headings   (apothecary label feel)
     --font-mono     all numeric/data readouts    (lab-printout feel)
     --font-body     labels, running copy         (video-legible sans)
   ========================================================================== */

:root {
  /* base surfaces */
  --bg: #090c11;
  --bg-raised: #10141b;
  --border-soft: #232b36;

  /* signature background pattern -- design-system tokens (Layer 2 of the
     signature-pattern recipe). Recolor these per project; the method
     (diagonal gradient wash + tiled icon-mask overlay, blended via
     mix-blend-mode:overlay in assets/bg-pattern.svg) stays fixed. */
  --pattern-grad-start: #031e2b;
  --pattern-grad-end: #0c0915;
  --pattern-grad-angle: 157deg;
  --pattern-icon-fill: #ffffff;
  --pattern-opacity: 0.5;
  /* shared tile size: page background and every card pattern use this
     exact size (card position is then aligned to the page via a
     JS-computed background-position, see alignCardPatterns in app.js), so
     a card reads as a cutout window onto one continuous pattern instead of
     an independently-scaled copy. Sized at the SVG's native 1920x720
     authored scale (1280 + 8 extra icon columns on the right, gradient
     definition left untouched) -- full page width = one pass of the
     pattern with the tile boundary pushed past typical viewport widths,
     not shrunk to card width; a card just shows a small crop of it, at
     the same icon size as the background. */
  --pattern-tile: 1920px 720px;

  /* red recolor of the same signature pattern (assets/bg-pattern-red.svg) --
     used on alarm-red surfaces (naive strawman wall, Critical band). */
  --pattern-red-grad-start: #650d19;
  --pattern-red-grad-end: #c23040;
  --pattern-red-grad-angle: 157deg;

  /* yellow recolor of the same signature pattern (assets/bg-pattern-yellow.svg)
     -- used on the Monitor band. */
  --pattern-yellow-grad-start: #4c3b06;
  --pattern-yellow-grad-end: #c19f2d;
  --pattern-yellow-grad-angle: 157deg;

  /* slate/blue-gray recolor of the same signature pattern
     (assets/bg-pattern-slate.svg) -- used on the No Action band. */
  --pattern-slate-grad-start: #2c323d;
  --pattern-slate-grad-end: #4d5a6d;
  --pattern-slate-grad-angle: 157deg;

  /* text */
  --fg: #f4f7fa;
  --fg-muted: #becada;
  --fg-dim: #8894a3;

  /* fonts */
  --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Cascadia Code', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* risk bands (real view) — saturated dark washes, high contrast text */
  --band-critical-bg: #5c0f16;
  --band-critical-border: #ff3b50;
  --band-critical-fg: #ffe4e7;

  --band-action-bg: #5a3006;
  --band-action-border: #ff9433;
  --band-action-fg: #ffe9d1;

  --band-monitor-bg: #4c3b06;
  --band-monitor-border: #ffcf34;
  --band-monitor-fg: #fff3c4;

  --band-noaction-bg: #2b323d;
  --band-noaction-border: #64738a;
  --band-noaction-fg: #eaeff5;

  /* naive strawman — everything reads as maximally alarming */
  --naive-bg: #650e18;
  --naive-border: #ff3b50;
  --naive-fg: #ffe4e7;

  /* platform identity — deliberately cool hues, orthogonal to the warm
     band palette above, so a platform badge never blends into a band wash */
  --plat-snowflake-bg: #0c3247;
  --plat-snowflake-border: #3fc4fb;
  --plat-snowflake-fg: #b3ebff;

  --plat-postgres-bg: #1b2154;
  --plat-postgres-border: #8b98ff;
  --plat-postgres-fg: #d1d6ff;

  --plat-dbt-bg: #0b3d2b;
  --plat-dbt-border: #3fe0a4;
  --plat-dbt-fg: #b6f7dc;

  --plat-default-bg: #2b2f3a;
  --plat-default-border: #99a2b3;
  --plat-default-fg: #e9ecf2;

  /* Deliberately a third hue family -- not a band color (red/orange/amber/gray = risk), not a
     platform color (cyan/indigo/green = data source). Violet reads as "provenance metadata",
     never mistaken for a risk signal at a glance. */
  --seeded-bg: #2e1a4d;
  --seeded-border: #b98bff;
  --seeded-fg: #ecdcff;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Signature pattern is a plain (non-fixed) background on body, tiled from
   its own top-left corner (0,0 = document origin). position:fixed +
   large tiled SVG backgrounds proved unreliable across engines and window
   sizes (clipped/blank regions in Safari, invisible in Chromium once an
   opaque parent background sat behind a negative z-index layer, and
   resize-repaint gaps in both) -- a normal background has none of those
   failure modes and repaints correctly on every resize by construction.
   It scrolls with the page instead of staying pinned to the viewport,
   which is an acceptable trade for actually working everywhere. Cards
   align to this same document-space grid via a JS-computed
   background-position (app.js alignCardPatterns) rather than
   background-attachment:fixed, for the same reliability reason. */
body {
  position: relative;
  min-height: 100vh;
  padding: 32px clamp(16px, 4vw, 56px) 64px;
  background-color: var(--pattern-grad-start);
  background-image: linear-gradient(rgba(6, 9, 13, 0.55), rgba(6, 9, 13, 0.55)),
                     url("assets/bg-pattern.svg");
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--pattern-tile);
  background-position: center, 0 0;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
  border-bottom: 2px solid var(--border-soft);
  padding-bottom: 20px;
}

.mark {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.mark__glyph {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--band-monitor-border);
}

.mark__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 46px);
  letter-spacing: 0.04em;
  margin: 0;
}

.mark__tagline {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--fg-muted);
}

.mark__tagline em {
  color: var(--fg);
}

.mark__subhead {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--fg-dim);
}

/* -------------------------------------------------------------- control deck */

.control-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 8px 0 26px;
  padding: 24px clamp(12px, 4vw, 40px);
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}

.toggle-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.toggle-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(15px, 2vw, 19px);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease);
  cursor: pointer;
  user-select: none;
}

/* active/inactive state is driven entirely by JS toggling .is-active,
   kept as one explicit mechanism rather than mixing in a CSS-only guess */
.toggle-label.is-active.toggle-label--naive { color: var(--naive-border); text-shadow: 0 0 18px rgba(255, 59, 80, 0.45); }
.toggle-label.is-active.toggle-label--real { color: var(--band-monitor-border); text-shadow: 0 0 18px rgba(255, 207, 52, 0.35); }
.toggle-label:not(.is-active) { color: var(--fg-dim); text-shadow: none; }

.mode-toggle {
  position: relative;
  width: 88px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--border-soft);
  background: #171c25;
  cursor: pointer;
  padding: 0;
  flex: none;
}

.mode-toggle:focus-visible {
  outline: 2px solid var(--band-monitor-border);
  outline-offset: 3px;
}

.mode-toggle__track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--naive-bg), var(--band-monitor-bg) 55%, var(--band-noaction-bg));
  opacity: 0.85;
}

.mode-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: transform 0.45s var(--ease);
}

.mode-toggle[aria-checked="true"] .mode-toggle__knob {
  transform: translateX(44px);
}

.mode-caption {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--fg-muted);
  text-align: center;
  max-width: 60ch;
}

.mode-caption strong { color: var(--fg); }

/* -------------------------------------------------------------- summary strip */

.summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  align-items: center;
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-dim);
}

.summary-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.summary-item--muted { color: var(--fg-dim); }

.summary-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.summary-value { color: var(--fg); font-weight: 600; }

/* ------------------------------------------------------------------- wall */

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
}

.card {
  --card-bg: var(--band-noaction-bg);
  --card-border: var(--band-noaction-border);
  --card-fg: var(--band-noaction-fg);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 12px;
  border: 2px solid var(--card-border);
  background: var(--card-bg);
  color: var(--card-fg);
  cursor: pointer;
  text-align: left;
  font: inherit;
  /* Longhand on purpose: app.js's FLIP re-sort needs to zero out just the
     transform slot's duration for an instant snap, while leaving the
     band-recolor fade in the other slots running on its own timing. That
     only works if transition-property/-duration are separate lists here
     instead of the shorthand — see CARD_TRANSITION_DURATIONS in app.js,
     which must stay in the same property order as this list. */
  transition-property: transform, background-color, border-color, color, box-shadow;
  transition-duration: 0.55s, 0.55s, 0.55s, 0.55s, 0.25s;
  transition-timing-function: var(--ease);
  will-change: transform;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-3px) scale(1.012);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  outline: none;
}

.card:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

/* band-specific coloring — active only in real mode (see override below) */
.card[data-band="Critical"]  { --card-bg: var(--band-critical-bg);  --card-border: var(--band-critical-border);  --card-fg: var(--band-critical-fg); }
.card[data-band="Action"]    { --card-bg: var(--band-action-bg);    --card-border: var(--band-action-border);    --card-fg: var(--band-action-fg); }
.card[data-band="Monitor"]   { --card-bg: var(--band-monitor-bg);   --card-border: var(--band-monitor-border);   --card-fg: var(--band-monitor-fg); }
.card[data-band="No Action"] { --card-bg: var(--band-noaction-bg);  --card-border: var(--band-noaction-border);  --card-fg: var(--band-noaction-fg); }

/* red surfaces get the signature pattern (red recolor) instead of a flat
   wash: same gradient+tiled-icon method as the page background, at the
   identical --pattern-tile size/position with attachment:fixed, so each
   card reads as a cutout window onto the same continuous pattern rather
   than its own independently-scaled copy. Scrim keeps card numerals
   legible over the icon layer. */
.card[data-band="Critical"] {
  background-color: var(--card-bg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("assets/bg-pattern-red.svg");
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--pattern-tile);
  background-position: center, 0 0;
}

/* yellow surfaces (Monitor band) get the yellow recolor, same method. */
.card[data-band="Monitor"] {
  background-color: var(--card-bg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("assets/bg-pattern-yellow.svg");
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--pattern-tile);
  background-position: center, 0 0;
}

/* slate/blue-gray surfaces (No Action band) get that recolor, same method. */
.card[data-band="No Action"] {
  background-color: var(--card-bg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("assets/bg-pattern-slate.svg");
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--pattern-tile);
  background-position: center, 0 0;
}

/* naive strawman — higher specificity (.wall.mode-naive .card) always wins
   over the single-attribute band rules above, regardless of source order */
.wall.mode-naive .card {
  --card-bg: var(--naive-bg);
  --card-border: var(--naive-border);
  --card-fg: var(--naive-fg);
  background-color: var(--card-bg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url("assets/bg-pattern-red.svg");
  background-repeat: no-repeat, repeat;
  background-size: cover, var(--pattern-tile);
  background-position: center, 0 0;
}

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  flex: none;
}

.platform-badge--snowflake { background: var(--plat-snowflake-bg); border-color: var(--plat-snowflake-border); color: var(--plat-snowflake-fg); }
.platform-badge--postgres  { background: var(--plat-postgres-bg);  border-color: var(--plat-postgres-border);  color: var(--plat-postgres-fg); }
.platform-badge--dbt       { background: var(--plat-dbt-bg);       border-color: var(--plat-dbt-border);       color: var(--plat-dbt-fg); }
.platform-badge--other     { background: var(--plat-default-bg);   border-color: var(--plat-default-border);   color: var(--plat-default-fg); }

.card__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.seeded-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px dashed var(--seeded-border);
  background: var(--seeded-bg);
  color: var(--seeded-fg);
  flex: none;
  white-space: nowrap;
}

.rank-chip {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--card-fg);
  opacity: 0.9;
  white-space: nowrap;
}

.card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.15;
  margin: 0;
  word-break: break-word;
}

.card__metric {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  transition: opacity 0.22s ease;
}

.card__metric.is-swapping { opacity: 0; }

.card__metric-value {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
}

.card__metric-tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid currentColor;
}

.card__metric-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--card-fg);
  opacity: 0.78;
}

.card__detail {
  font-size: 13.5px;
  color: var(--card-fg);
  opacity: 0.82;
  line-height: 1.4;
}

.card__hint {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* -------------------------------------------------------------------- footer */

.board-footer {
  margin-top: 40px;
  text-align: center;
  color: var(--fg-dim);
  font-size: 13px;
}

.board-footer__disclosure {
  margin-top: 12px;
  color: var(--fg-muted);
}

.board-footer__disclosure .seeded-badge {
  margin-right: 6px;
  vertical-align: middle;
}

.board-footer__disclosure code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* --------------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 9, 0.78);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
  z-index: 50;
}

.modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: relative;
  width: min(720px, 100%);
  background: var(--bg-raised);
  border: 1.5px solid var(--border-soft);
  border-radius: 16px;
  padding: 34px clamp(18px, 4vw, 40px) 30px;
  transform: translateY(14px) scale(0.98);
  transition: transform 0.28s var(--ease);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.modal-backdrop.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--bg);
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.modal__close:hover { background: #1a2029; }

/* modal content blocks (built by app.js) */

.g-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.g-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin: 0;
}

.g-urn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-dim);
  word-break: break-all;
  margin: 10px 0 20px;
}

.g-seeded-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 20px;
  border: 1.5px dashed var(--seeded-border);
  border-radius: 10px;
  background: var(--seeded-bg);
  color: var(--seeded-fg);
  font-size: 13.5px;
  line-height: 1.5;
}

.g-seeded-notice .seeded-badge {
  flex: none;
}

.g-seeded-notice code {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

.g-band-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
}

.g-section {
  margin: 22px 0;
}

.g-section h3 {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 10px;
}

.g-ranks {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
}

.g-rank-box { text-align: center; }
.g-rank-box .g-rank-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-dim); margin-bottom: 6px; }
.g-rank-box .g-rank-num { font-family: var(--font-mono); font-size: 30px; font-weight: 700; }
.g-rank-box .g-rank-score { font-family: var(--font-mono); font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.g-rank-arrow { font-size: 22px; color: var(--fg-dim); }

.g-divergence {
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--fg-muted);
  text-align: center;
}

.g-divergence strong { color: var(--fg); }

.g-formula {
  font-family: var(--font-mono);
  font-size: clamp(16px, 3vw, 21px);
  font-weight: 700;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
}

.g-formula .op { color: var(--fg-dim); font-weight: 400; margin: 0 6px; }
.g-formula .eq { color: var(--band-monitor-border); margin: 0 6px; }

.g-factor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.g-factor {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 10px 12px;
}

.g-factor-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-dim); }
.g-factor-value { font-family: var(--font-mono); font-size: 19px; font-weight: 700; margin-top: 2px; }
.g-factor-note { font-size: 12px; color: var(--fg-muted); margin-top: 4px; line-height: 1.35; }

.g-reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.g-reasons li {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--band-monitor-border);
  border-radius: 8px;
  font-size: 13.5px;
}

.g-reasons .g-none {
  border-left-color: var(--band-noaction-border);
  color: var(--fg-muted);
}

.g-foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.g-action {
  margin: 0;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--band-monitor-border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--fg);
  line-height: 1.5;
}

/* --------------------------------------------------------------------- misc */

.load-error {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--band-critical-bg);
  border: 1.5px solid var(--band-critical-border);
  color: var(--band-critical-fg);
  border-radius: 12px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .g-ranks { grid-template-columns: 1fr; }
  .g-rank-arrow { transform: rotate(90deg); }
}