/* The public /mentor-access page.
 *
 * Loads after landing.css, trades-page.css and portfolio-page.css and adds
 * only what this page needs. It borrows the section furniture, the card and
 * the jump nav from the other product pages on purpose: this is the same
 * site. What is new is one object — the pass — and the two panels that take
 * it apart.
 *
 * Logical properties only, so the Arabic page mirrors without a second
 * stylesheet, and every figure keeps its own direction.
 */

.mn-main {
  --mn-hair: color-mix(in srgb, var(--border) 65%, transparent);
}

/* ---- the pass ------------------------------------------------------------ */

/* An object, not a card: a notch down each side and a torn edge above the
   footer, so it reads as something issued and revocable rather than as one
   more panel of marketing. */
.mn-pass {
  position: relative;
  padding: 0;
}

.mn-pass-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 0;
}

.mn-pass-kind {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mn-state {
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}

.mn-state.is-active {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border: .5px solid color-mix(in srgb, var(--green) 40%, transparent);
}

.mn-who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 16px;
}

.mn-face {
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--cyan);
  background: var(--cyan-dim);
  border: .5px solid color-mix(in srgb, var(--cyan) 35%, transparent);
}

.mn-who-text { display: grid; gap: 2px; min-width: 0; }
.mn-who-text b { font-size: 15px; font-weight: 700; }
.mn-who-text span { font-size: 11.5px; color: var(--text-muted); }

/* A band naming what the rows under it are. */
.mn-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  padding: 9px 18px;
  border-block: .5px solid var(--mn-hair);
  background: var(--surface-raised);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mn-band span {
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
  font-size: 11px;
  color: var(--text-muted);
}

.mn-band.is-never { color: var(--text-muted); }

.mn-scopes,
.mn-locked {
  list-style: none;
  margin: 0;
  padding: 12px 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}

.mn-scopes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  min-width: 0;
}

/* The switch is drawn, never animated. The row's state is ALSO in words
   beside it and the off switch is a different shape, because colour alone is
   not a label — a reader who cannot tell cyan from grey still has to be able
   to see which pages are open. */
.mn-switch {
  position: relative;
  flex: none;
  inline-size: 30px;
  block-size: 17px;
  border-radius: 999px;
  background: var(--bg);
  border: .5px solid var(--border-strong);
}

.mn-scope-name { min-width: 0; overflow-wrap: anywhere; }

.mn-scope-state {
  margin-inline-start: auto;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Off is a shape as well as a shade: a dashed outline reads as "empty" with
   the colour taken away. */
.mn-scopes li.is-off { color: var(--text-muted); }
.mn-scopes li.is-off .mn-switch { border-style: dashed; background: transparent; }

.mn-switch::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: var(--text-muted);
}

.mn-scopes li.is-on .mn-switch {
  background: color-mix(in srgb, var(--cyan) 22%, transparent);
  border-color: color-mix(in srgb, var(--cyan) 55%, transparent);
}

.mn-scopes li.is-on .mn-switch::after {
  inset-inline-start: auto;
  inset-inline-end: 2px;
  background: var(--cyan);
}

.mn-locked li {
  font-size: 12.5px;
  color: var(--text-muted);
}

.mn-locked s { text-decoration-color: color-mix(in srgb, var(--red) 70%, transparent); }

/* The torn edge: a pass is issued, and can be torn up. */
.mn-pass-foot {
  position: relative;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-block-start: 1px dashed var(--border-strong);
  background: var(--surface-raised);
}

.mn-ends { display: grid; gap: 2px; }
.mn-ends span { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.mn-ends b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.mn-run { display: grid; gap: 6px; min-width: 0; }

.mn-run-track {
  display: block;
  block-size: 6px;
  border-radius: 999px;
  background: var(--bg);
  border: .5px solid var(--border);
  overflow: hidden;
  /* Time runs one way whatever the page direction is. */
  direction: ltr;
}

.mn-run-track i {
  display: block;
  block-size: 100%;
  background: linear-gradient(90deg, var(--cyan), color-mix(in srgb, var(--cyan) 35%, transparent));
}

.mn-run-left { font-size: 11px; color: var(--text-muted); }

.mn-revoke {
  font-size: 12px;
  font-weight: 650;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: var(--red);
  border: .5px solid color-mix(in srgb, var(--red) 45%, transparent);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .mn-scopes, .mn-locked { grid-template-columns: minmax(0, 1fr); }
  .mn-pass-foot { grid-template-columns: minmax(0, 1fr); }
}

/* ---- open / closed / never ----------------------------------------------- */

.mn-rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mn-col { padding: 16px 18px; border-inline-start: .5px solid var(--mn-hair); min-width: 0; }
.mn-col:first-child { border-inline-start: 0; }

.mn-col-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mn-col-head b {
  margin-inline-start: auto;
  font-size: 16px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.mn-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mn-col li { font-size: 13px; }

.mn-col.is-on .mn-col-head { color: var(--cyan); }
.mn-col.is-on li { color: var(--text); }
.mn-col.is-off li { color: var(--text-secondary); }
.mn-col.is-never .mn-col-head { color: var(--red); }
.mn-col.is-never li { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 60%, transparent); }

.mn-col-note { margin: 12px 0 0; font-size: 11px; line-height: 1.55; color: var(--text-muted); }

@media (max-width: 760px) {
  .mn-rooms { grid-template-columns: minmax(0, 1fr); }
  .mn-col { border-inline-start: 0; border-block-start: .5px solid var(--mn-hair); }
  .mn-col:first-child { border-block-start: 0; }
}

/* ---- the invitation, end to end ------------------------------------------ */

/* A sequence of labelled steps, not a plotted axis, so it mirrors with the
   page: an Arabic reader follows it from the right. The rule and the dot are
   placed logically, so they follow it. (A CHART is different and stays left
   to right — see the time bar below, and every axis on Performance.) */
.mn-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 26px 18px 20px;
}

.mn-stop {
  position: relative;
  display: grid;
  gap: 4px;
  padding-inline-end: 12px;
  min-width: 0;
}

.mn-stop::before {
  content: "";
  position: absolute;
  inset-block-start: -13px;
  inset-inline: 0;
  block-size: 1px;
  background: var(--border-strong);
}

.mn-stop.is-end::before { background: linear-gradient(90deg, var(--border-strong), transparent); }

.mn-dot {
  position: absolute;
  inset-block-start: -18px;
  inset-inline-start: 0;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--cyan);
}

.mn-stop.is-end .mn-dot { border-color: var(--text-muted); }

.mn-stop b { font-size: 13px; font-weight: 650; }
.mn-stop span { font-size: 11px; color: var(--text-muted); }

@media (max-width: 700px) {
  .mn-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
}

.mn-token {
  padding: 16px 18px;
  border-block-start: .5px solid var(--mn-hair);
  background: var(--surface-raised);
}

/* This is a claim, not a label.
   ---------------------------------------------------------------------
   "The link is not the key" is one of the strongest sentences on the page:
   it is the answer to "what if somebody forwards my invitation". It was set
   at 9.5px, uppercase, tracked out — the treatment this sheet uses for the
   word above a group of rows — so a reader scanned past it as furniture.
   It is sized and coloured as what it is now. */
.mn-token-head {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 640;
  letter-spacing: -.005em;
  color: var(--text);
}

.mn-token-rows { display: grid; gap: 8px; }

.mn-token-rows p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.mn-token-rows b { font-weight: 650; color: var(--text); overflow-wrap: anywhere; }

.mn-hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--cyan);
}

.mn-token-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-muted); }

/* ---- how it ends --------------------------------------------------------- */

.mn-limits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mn-limits > div {
  display: grid;
  gap: 5px;
  padding: 16px 18px;
  border-inline-start: .5px solid var(--mn-hair);
  min-width: 0;
}

.mn-limits > div:first-child { border-inline-start: 0; }
.mn-limits span { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.mn-limits b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }

@media (max-width: 700px) {
  .mn-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-limits > div:nth-child(3) { border-inline-start: 0; }
  .mn-limits > div:nth-child(n+3) { border-block-start: .5px solid var(--mn-hair); }
}

.mn-states { padding: 16px 18px; border-block-start: .5px solid var(--mn-hair); }

.mn-states-head {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mn-states ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.mn-states li {
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  border: .5px solid var(--border-strong);
  color: var(--text-muted);
}

.mn-states li.is-on {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.mn-aside { margin-block-start: 22px; max-inline-size: 78ch; }

/* ---- what never travels -------------------------------------------------- */

.mn-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mn-side { padding: 16px 18px; border-inline-start: .5px solid var(--mn-hair); min-width: 0; }
.mn-side:first-child { border-inline-start: 0; }

/* These two name the halves of the comparison the section exists to make —
   what your page holds, and what the mentor receives. They are the argument,
   not a caption on it. */
.mn-side-head {
  margin: 0 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mn-side.is-safe { background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.mn-side.is-safe .mn-side-head { color: var(--cyan); }

.mn-side pre {
  margin: 0;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.mn-line { display: block; white-space: pre; }

/* A key the filter drops. Struck through AND dimmed AND repeated in the list
   underneath, because a line that is only a different colour says nothing to
   a reader who cannot see the colour. */
.mn-line.is-cut {
  color: var(--red);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--red) 55%, transparent);
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

@media (max-width: 860px) {
  .mn-diff { grid-template-columns: minmax(0, 1fr); }
  .mn-side { border-inline-start: 0; border-block-start: .5px solid var(--mn-hair); }
  .mn-side:first-child { border-block-start: 0; }
}

.mn-cut-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 14px 18px;
  border-block-start: .5px solid var(--mn-hair);
  font-size: 11px;
  color: var(--text-muted);
}

.mn-cut-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: .5px solid color-mix(in srgb, var(--red) 35%, transparent);
  color: var(--red);
}

.mn-cut-more {
  padding: 2px 7px;
  border-radius: 999px;
  border: .5px solid var(--border-strong);
  font-variant-numeric: tabular-nums;
}

.mn-live {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 18px 14px;
  border-block-start: .5px solid var(--mn-hair);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

.mn-live svg { flex: none; margin-block-start: 2px; }

/* ---- the audit tape ------------------------------------------------------ */

.mn-tape { list-style: none; margin: 0; padding: 10px 0; }

.mn-tape li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px;
  padding: 9px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
}

.mn-tape li + li { border-block-start: .5px solid var(--mn-hair); }
.mn-tape span { color: var(--text-muted); }
.mn-tape b { font-weight: 600; color: var(--text-secondary); letter-spacing: .02em; }
.mn-tape li.is-denied b { color: var(--amber); }

/* The three notes under a panel need air between them and it. */
.mn-main .tp-notes { margin-block-start: 22px; }

.mn-two { margin-block-start: 0; }
.mn-h3 { margin-block-start: 22px; }
.mn-meta { font-size: 11px; color: var(--text-muted); }
.mn-card { overflow: hidden; }