/* Styling for corpm8. The page borrows the look of the EVE Online client's
   corporation information panel: the faction banner, the label/value attribute
   rows, the dark palette. It is not dressed up as a floating window. */

:root {
  --text: #cfd6cd;
  --text-strong: #ffffff;
  --text-dim: #8b968a;
  --text-label: #b3bcb0;
  --alert: #cf4a48;
  --link: #8fd0ff;

  --banner-from: #16301d;
  --banner-mid: #24603a;
  --banner-to: #3d9c58;

  --accent: #6fdc8c;
  --rule: rgba(150, 165, 150, 0.16);
  --rule-strong: rgba(150, 165, 150, 0.3);
  --surface: rgba(20, 23, 20, 0.55);

  /* JetBrains Mono throughout. The corp description carries ASCII art, which
     only lines up in a monospace face; see fonts.css for the @font-face set. */
  --font-ui: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-mono: var(--font-ui);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 40px 20px 56px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  /* The client's backdrop: deep space with a warm nebula low and left. */
  background:
    radial-gradient(1200px 700px at 15% 95%, rgba(150, 118, 74, 0.4), transparent 62%),
    radial-gradient(900px 600px at 85% 5%, rgba(40, 70, 55, 0.34), transparent 60%),
    #0c0e0c;
  background-attachment: fixed;
}

a { color: var(--link); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.corp {
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
}

/* ---------- banner ---------- */

.banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  overflow: hidden;
  background: linear-gradient(100deg, var(--banner-from) 0%, var(--banner-mid) 55%, var(--banner-to) 100%);
}

/* The client paints faction-coloured slashes into the banner's right edge.
   Order matters: green sits above, pink is the last band along the bottom. */
.banner::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: 140px;
  height: 56px;
  transform: skewX(-34deg);
  background: linear-gradient(180deg, transparent 0 34%, #74d086 34% 58%, #d8407f 58% 100%);
  opacity: 0.9;
  pointer-events: none;
}

.banner__logo {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.3);
}

.banner__text {
  min-width: 0;
  z-index: 1;
}

.banner__name {
  margin: 0 0 7px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.banner__ticker {
  margin-left: 10px;
  opacity: 0.75;
  font-weight: 400;
  font-size: 0.8em;
  letter-spacing: 0.04em;
}

.banner__line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.banner__line svg { flex: 0 0 auto; opacity: 0.9; }

/* ---------- description + attributes ---------- */

.corp__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.95fr);
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.description {
  padding: 24px 26px;
  overflow-wrap: anywhere;
}

.description a { color: var(--link); }

.attributes {
  padding: 20px 26px 24px;
  border-left: 1px solid var(--rule);
}

.attr-list { margin: 0; }

.attr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
}

.attr:last-child { border-bottom: none; }

.attr__label {
  color: var(--text-label);
  flex: 0 1 auto;
}

.attr__value {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  text-align: right;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.attr__value.is-muted { color: var(--text-dim); font-style: italic; }

.attr__portrait {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  border: 1px solid var(--rule-strong);
  object-fit: cover;
  flex: 0 0 auto;
}

.hint {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(150, 200, 240, 0.7);
  color: rgba(170, 212, 245, 0.95);
  font-size: 9px;
  line-height: 1;
  cursor: help;
}

/* Rows unlocked by the viewer's own access token. */
.attributes__private {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-strong);
}

.attributes__private-heading {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

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

.corp__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 12px 4px 0;
  font-size: 11.5px;
  color: var(--text-dim);
}

.corp__meta,
.corp__session {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.corp__meta a,
.corp__session a { color: var(--text-dim); }

.corp__meta a:hover,
.corp__session a:hover { color: var(--text); }

.inline-form { display: inline; margin: 0; }

.linkish {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
}

.linkish:hover { color: var(--text); }

/* ---------- setup, notices and errors ---------- */

.page-head {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--rule);
}

.page-head h1 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-strong);
}

.page-head__sub { margin: 0; color: var(--text-dim); max-width: 62ch; }

.alert {
  margin: 18px 0 0;
  padding: 9px 12px;
  border-left: 2px solid var(--alert);
  background: rgba(120, 40, 40, 0.18);
  color: #edb6b5;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

.step__title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
}

.step.is-done .step__title { color: var(--accent); }

.step p { margin: 0 0 10px; max-width: 68ch; }

.step__note { color: var(--text-dim); }

.muted { color: var(--text-dim); }

.identity {
  display: flex;
  align-items: center;
  gap: 9px;
}

code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 5px;
}

code.block {
  display: inline-block;
  padding: 7px 10px;
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.plain,
.scopes {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}

.scopes li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 3px 0;
}

.scopes__why { color: var(--text-dim); }

.action {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-strong);
  background: rgba(45, 92, 60, 0.9);
  border: 1px solid rgba(111, 220, 140, 0.5);
  padding: 7px 18px;
  cursor: pointer;
}

.action:hover { background: rgba(58, 118, 77, 0.95); }
.action:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* ---------- responsive ---------- */

@media (max-width: 820px) {
  .corp__body { grid-template-columns: 1fr; }

  .attributes {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
  }
}

@media (max-width: 520px) {
  body { padding: 16px 12px 32px; }

  .banner {
    gap: 14px;
    padding: 14px 16px;
  }

  .banner__logo { width: 60px; height: 60px; }
  .banner__name { font-size: 16px; }
  .banner__ticker { margin-left: 0; display: block; }
  .banner__line { font-size: 12px; }

  .attributes { padding: 16px 16px 20px; }

  /* The description holds ASCII art that only reads correctly on one line.
     The widest line is 46 characters and JetBrains Mono advances 0.6em, so
     46 * 0.6 = 27.6px of width is needed per 1px of font size. Available width
     is the viewport less the body's 12px and this block's 12px of side padding.
     Clamped so prose never shrinks past legibility on very narrow phones. */
  .description {
    padding: 16px 12px 20px;
    font-size: clamp(10px, calc((100vw - 48px) / 27.6), 12.5px);
  }

  /* Label above value reads better than a squeezed two-column row. */
  .attr {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .attr__value {
    justify-content: flex-start;
    text-align: left;
  }

  .corp__footer { flex-direction: column; align-items: flex-start; }
}