/* ============================================================
   Resonance — My reports.
   Sits on assets/style.css + member.css. Matt's shape: your own report first, then one
   group per connection holding everything the two of you have — their personal report
   where both of you said yes, and your Two of You reports, superseded ones quietly
   underneath the current one.
   Phone first: the primary review target is 390px wide. No counts, no dates.
   ============================================================ */

.mr-wrap { max-width: 820px; margin: 0 auto; padding: 0 20px 70px; }
.mr-head { padding: 40px 0 6px; max-width: 620px; }
.mr-head h1 { font-size: clamp(1.9rem, 6vw, 2.9rem); }
.mr-head .lead { margin-top: 12px; font-size: 1.06rem; color: var(--ink-soft); }
/* WO73 A — the audience sentence. Smaller and quieter than the lead it sits under, because
   it is a caveat rather than a promise, and it must not compete with the page's own line. */
.mr-head .mr-audience { margin-top: 8px; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }
.mr-head .mr-audience a { color: inherit; text-decoration: underline; }

/* ---------- the lead card: the member's own Lens report ---------- */
.mr-lead { display: block; position: relative; overflow: hidden; margin-top: 26px; border-radius: 24px; padding: 26px 22px; background: var(--charcoal); color: var(--white); border: 1px solid rgba(255,253,248,.07); box-shadow: 0 22px 52px rgba(20,20,20,.28); text-decoration: none; }
.mr-lead::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(108% 100% at 78% 12%, rgba(240,166,60,.19) 0%, rgba(240,166,60,.05) 38%, rgba(20,20,20,0) 72%); }
.mr-lead > * { position: relative; z-index: 1; }
.mr-lead:hover { text-decoration: none; box-shadow: 0 26px 60px rgba(20,20,20,.36); }
.mr-lead:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.mr-lead .kicker { display: block; margin-bottom: 8px; }
.mr-lead h2 { color: var(--white); font-size: clamp(1.5rem, 5vw, 2.05rem); margin-bottom: 8px; }
.mr-lead p { color: rgba(255,253,248,.7); max-width: 46ch; font-size: .98rem; }
.mr-go { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--orange); }
.mr-lead-empty { background: var(--white); color: var(--ink); border: 1.5px dashed rgba(33,29,22,.16); box-shadow: none; cursor: default; }
.mr-lead-empty::before { display: none; }
.mr-lead-empty h2 { color: var(--ink); }
.mr-lead-empty p { color: var(--ink-soft); }
/* WO65 — the FAILED lead card. Same card, a solid edge instead of a dashed one, because
   "not yet" and "it went wrong" are two different facts and must not look identical.
   Nothing red and nothing shouting: a failure the member can undo with one button is not
   an alarm, and the copy is already doing the honest work. */
.mr-lead-failed { border-style: solid; border-color: rgba(196,116,26,.45); }
.mr-lead-failed p + p { margin-top: 14px; }
.mr-lead-failed .m-btn-small { border-color: var(--orange-deep); }

/* ---------- the section rule, borrowed from the network page's vocabulary ---------- */
.mr-sec { display: flex; align-items: center; gap: 14px; margin: 38px 0 6px; }
.mr-sec h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.7rem); }
.mr-secmark { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--charcoal); }
.mr-secrule { flex: 1; height: 1px; min-width: 30px; background: linear-gradient(to right, rgba(20,20,20,.22), rgba(20,20,20,0)); }

/* ---------- one connection, and everything the two of you hold ---------- */
.mr-group { margin-top: 22px; }
.mr-who { display: flex; align-items: center; gap: 11px; font-size: 1.12rem; margin-bottom: 10px; }
.mr-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: .88rem; color: #fff; background: linear-gradient(150deg, #6A6350, #211D16); }
.mr-items { display: flex; flex-direction: column; gap: 10px; }
.mr-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--white); border: 1px solid rgba(33,29,22,.07); border-left: 3px solid var(--charcoal); border-radius: 14px; padding: 13px 15px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .18s, box-shadow .18s; }
.mr-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); text-decoration: none; }
.mr-item:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.mr-item.mr-dyad { border-left-color: var(--orange); background: linear-gradient(180deg, #FFFDF8 0%, #FEF7EA 100%); }
.mr-kind { flex: none; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--orange-deep); }
.mr-item.mr-old .mr-kind { color: #A79E8D; }
.mr-what { flex: 1 1 200px; min-width: 0; font-size: .95rem; color: var(--ink-soft); }
.mr-arrow { flex: none; color: var(--orange-deep); font-weight: 700; }
/* an earlier version is still readable, and reads as what it is: quiet, not gone */
.mr-item.mr-old { border-left-color: #C9C0B0; background: #F7F3EA; box-shadow: none; }
.mr-item.mr-old .mr-what { color: #6E685A; }
.mr-item.mr-old .mr-arrow { color: #A79E8D; }
.mr-none { font-size: .92rem; color: #6E685A; max-width: 56ch; margin: 0; }

/* WO340 — the line under My Report saying where the other reports live. It IS .mr-none, this
   page's own footnote grey, and adds only the space that lifts it off the card above: no box,
   no border, no icon and no attention treatment of any kind, because it offers no action and
   nothing is waiting on it. The two links take the page's link colour, as .mr-fbline's do. */
.mr-elsewhere { margin-top: 26px; }
.mr-elsewhere a { color: var(--orange-deep); }

/* ---------- nothing shared with anybody yet ---------- */
.mr-empty { margin-top: 26px; background: var(--white); border: 1.5px dashed rgba(33,29,22,.16); border-radius: var(--radius); padding: 24px 22px; color: var(--ink-soft); max-width: 560px; }
.mr-empty p { margin: 0 0 14px; }
.mr-empty p:last-child { margin: 0; }

/* on a phone the row is two lines rather than a wrap: the kind of report on its own,
   then what it is with the arrow pinned beside it — an arrow orphaned on line three
   reads as a stray character */
@media (max-width: 560px) {
  .mr-item { display: grid; grid-template-columns: 1fr auto; row-gap: 3px; column-gap: 12px;
    grid-template-areas: "kind kind" "what arrow"; align-items: center; }
  .mr-kind { grid-area: kind; }
  .mr-what { grid-area: what; }
  .mr-arrow { grid-area: arrow; }
}

@media (min-width: 700px) {
  .mr-lead { padding: 30px 30px; }
  .mr-item { padding: 14px 18px; }
}

/* ============================================================
   WO10 bonus, item 14 — asking for what you do not have.
   One quiet row per connection, under whatever the two of them already hold, and
   only where something is genuinely missing. Never a call to action competing with
   the reports themselves: the reports are the page, this is the footnote.

   THE SENT STATE IS DELIBERATELY DULL. No counter, no date, no "waiting", no way to
   ask again — an ask that was ignored and an ask that was declined are the identical
   line, forever (Principle 8), and there is nothing on this page to read for a
   difference that must not exist.
   ============================================================ */
.mr-askrow { margin-top: 14px; padding: 14px 16px; border-radius: 14px;
  background: rgba(243,234,218,.55); border: 1px dashed rgba(33,29,22,.14); }
.mr-askline { margin: 0 0 10px; font-size: .93rem; color: var(--ink-soft); }
.mr-askbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-ask { cursor: pointer; }
.mr-ask i { font-style: italic; }
.mr-ask[disabled] { opacity: .55; cursor: default; }
.mr-askfine { margin: 10px 0 0; }
.mr-asked-wrap { margin-top: 14px; }
.mr-asked { margin: 14px 0 0; display: flex; align-items: flex-start; gap: 9px;
  font-size: .9rem; color: #6E685A; }
.mr-asked-wrap .mr-asked { margin-top: 0; }
.mr-tick { flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: .1em;
  background: var(--orange-soft); color: var(--orange-deep); font-size: .64rem;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   AN INCOMING ASK TO SWAP REPORTS (WO68 §33)
   ------------------------------------------------------------
   The card that never existed. Somebody has asked to swap personal reports and this is
   where it is answered, in the pair's own group, under the reports the two of them
   already have.

   IT IS SOLID WHERE .mr-askrow IS DASHED, and that is the whole visual argument: a dashed
   box is an OFFER of something a member might do; a solid one is a QUESTION somebody has
   actually put to them. Same family, same warmth, one border.

   IT DOES NOT PULSE, GLOW OR ANIMATE. It is a consent question, not a summons — nobody is
   being hurried, and an ask that quietly waits until the member is ready to answer it is
   the point (Principle 19: attention is guided, never grabbed; and the asker learns
   nothing either way, so there is nothing here to be late for).
   ============================================================ */
.mr-swapask { margin-top: 14px; padding: 15px 17px; border-radius: 14px;
  background: rgba(243,234,218,.75); border: 1px solid rgba(33,29,22,.14); }
.mr-swapline { margin: 0 0 6px; font-size: .95rem; color: var(--ink); line-height: 1.5; }
.mr-swapask .mr-askfine { margin: 0 0 12px; }
/* the same text button .mr-fbno is, for the same reason: "Not now" is not an action with
   weight, it is a way of leaving the question alone */
.mr-quiet { background: none; border: none; padding: 0 4px; font: inherit;
  font-size: .9rem; color: var(--ink-soft); text-decoration: underline; cursor: pointer; }
.mr-quiet:hover { color: var(--ink); }
.mr-quiet:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   WO99 — "NEW", ON THE GROUP THE NAV BADGE WAS ABOUT.

   The My Reports badge counts PEOPLE with a shared report this member has not
   seen. A badge that points at a page with nothing marked on it teaches the
   member that the badge lies (WO10 bonus item 1), so the group carries the
   news the badge counted, and it keeps carrying it until they open one of
   these reports — the badge's own clock quiets on arrival; this one does not.

   A WORD AND NOT A NUMBER. "New" is the whole of it: no count, no date, no
   "2 new", nothing that could be read as a score. It borrows the nav badge's
   own orange and its own pill so a member meets one visual idea of newness in
   this product, at the two ends of one journey.

   PRINCIPLE 19 — A FINITE PULSE. Three beats on the draw and then still, the
   same 1.1s beat and the same count the nav strip uses. Under reduced motion
   the ring is simply held: a static change of state, never movement and never
   nothing at all.
   --------------------------------------------------------------------------- */
.mr-new { flex: none; margin-left: 2px; padding: 2px 9px; border-radius: 999px;
  background: var(--orange); color: var(--charcoal);
  font-family: var(--font-sans, inherit); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  animation: mr-new-beat 1.1s ease-in-out 3; }

@keyframes mr-new-beat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 89, 12, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(232, 89, 12, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .mr-new { animation: none; box-shadow: 0 0 0 4px rgba(232, 89, 12, .45); }
}

/* ============================================================
   THE ONE QUIET LINE (WO61 §5).

   It is drawn LAST on the page, under everything, and everything about how it looks is
   the "non-obtrusive" half of Matt's direction. No card, no border, no background panel,
   no icon: the ask-row above it (.mr-askrow) is a dashed box because it is offering an
   ACTION about a specific person, and this is offering nothing — it is a sentence with
   two links in it, set in the same muted grey as a footnote and separated from the
   reports by a hairline rather than by a container.

   A member sees it once, ever, and only until they answer it either way. There is no
   badge, no pulse, no attention treatment of any kind: a nav badge means somebody is
   waiting on you, and nobody is waiting on this.
   ============================================================ */
.mr-fb { margin: 34px 0 8px; padding-top: 18px; border-top: 1px solid rgba(33,29,22,.08); }
.mr-fbline { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
.mr-fbline a { color: var(--orange-deep); }
.mr-fbline span { margin: 0 6px; opacity: .5; }
/* the same shape a text button takes everywhere else in this product (account.html's
   .linkish), written here because my-reports is not that page and a class defined in one
   page's <style> is not a class this stylesheet may lean on */
.mr-fbno { background: none; border: none; padding: 0; font: inherit; color: var(--ink-soft);
  text-decoration: underline; cursor: pointer; }
.mr-fbno:hover { color: var(--ink); }
.mr-fbno:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   WO90 — THE SEAL. A Knowing Game player whose party has not revealed sees the
   warm card here instead of their report, and a Two of You written for a party
   sits as a listed-but-unopenable item.

   THEY ARE STYLED AS *WAITING*, NEVER AS *BROKEN*. .mr-lead-failed borrows the
   orange of a problem; these two borrow nothing from it. A dotted rule and a
   softer left edge say "this is not open yet"; nothing here is red, nothing
   pulses, and there is no button, because there is nothing for the reader to
   do about it.
   --------------------------------------------------------------------------- */
.mr-lead-sealed { border-style: solid; border-color: rgba(33,29,22,.14); }
.mr-lead-sealed p + p { margin-top: 14px; }
/* WO297 — A CARD OFF THE STORED PAGE, LISTED WITHOUT ITS DOOR.
   It is on the screen for the length of one request, between an instant return and the live
   answer that replaces it, and the only thing these three rules do is stop it BEHAVING like the
   link it is about to become: no lift under the pointer, no pressable cursor, and the arrow that
   promises a destination is not drawn at all (see heldItem in assets/my-reports.js, which omits
   it). Everything else — the box, the border, the two lines of type — is the real card's, because
   the whole point of the paint is that the page looks like where the member just was. */
.mr-held, .mr-held:hover { cursor: default; transform: none; }
.mr-item.mr-held:hover { box-shadow: var(--shadow); }
.mr-lead.mr-held:hover { box-shadow: 0 22px 52px rgba(20,20,20,.28); }

.mr-sealed { border-left-style: dotted; border-left-color: rgba(33,29,22,.28);
  cursor: default; box-shadow: none; }
.mr-sealed .mr-what { color: var(--ink-soft); }

/* ---------------------------------------------------------------------------
   WO228 — THE GROUP THE MEMBER ARRIVED FOR.

   A member who tapped 'Get Reports' on somebody's card lands here with that
   person in mind (?who=<ref>), and the page brings their group into view. The
   mark says WHICH ONE without saying anything about it: a soft standing ring in
   the page's own focus colour, no pulse, no badge, no word. It is the arrival
   made legible and nothing else — the group's contents, its buttons and its
   states are exactly what they would be if the member had scrolled here.

   NOT --orange-deep AND NOT A FLASH. Orange is this page's colour for something
   that went wrong (.mr-lead-failed) and a pulse is WO120's machinery for a
   member's own unfinished business; an arrival is neither. It uses --ring, which
   is what the product already draws around the thing you just moved to, and it
   stops moving immediately because it is not asking for anything.
   --------------------------------------------------------------------------- */
.mr-group.mr-arrived { box-shadow: 0 0 0 4px var(--ring); border-radius: 12px;
  padding: 6px 10px; margin-left: -10px; margin-right: -10px; }
.mr-group.mr-arrived:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .mr-group.mr-arrived { transition: none; } }

/* ============================================================
   WO239 (Matt, August 16 2026) — THE REPORTS PLACE IS FOUR PAGES.
   ------------------------------------------------------------
   Each view carries its own header and nothing else carries one, so .mr-head is now a VIEW's
   header rather than the page's — the rules above are unchanged and simply stand over a
   shorter block: one h1, one lead, and the audience line under it. There is no kicker any
   more, because a kicker reading "Your reports" over a heading reading "Personal Reports" was
   two names for one place.
   ============================================================ */

/* ---------- the four doors, only where the shell has not drawn them ----------
   assets/shell.js draws the desktop rail and the phone bar whenever SHELL_V2 is true. This
   row is what the page draws for itself when it is not — WO222's revert, or any serving of
   this page without the shell — so the four views are never a set of pages with no way
   between them. It is deliberately the SAME shape the shell's rail items wear (a pill, the
   current one solid) rather than a third visual idea of "which of these am I on". */
.mr-doors { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; }
.mr-door { display: inline-block; padding: 8px 15px; border-radius: 999px;
  border: 1px solid rgba(33,29,22,.14); background: var(--white); font-size: .9rem;
  font-weight: 700; color: var(--ink-soft); text-decoration: none; }
.mr-door:hover { border-color: var(--orange-deep); color: var(--orange-deep);
  text-decoration: none; }
.mr-door.cur { background: var(--charcoal); border-color: var(--charcoal); color: var(--orange); }
.mr-door:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ============================================================
   REQUEST A REPORT — AND WHY THERE IS NOT A <select> OR A CHECKBOX LEFT IN IT.
   ------------------------------------------------------------
   MATT: "nothing else on the website is in blue so the color scheme is just wrong." The blue
   was not a rule anybody wrote — it was the operating system's own accent colour painting the
   inside of a native <select>'s open list and the tick inside a native checkbox, which no
   border, background or outline declared out here can reach. So the controls are the product's
   own elements: a person is a pressable row, and a choice of report is a pressable card. Every
   colour below is a variable out of assets/style.css and there is no hex code in this block.

   TWO SEPARATED GROUPS, CONNECTIONS FIRST — the order's own arrangement, and the separation is
   a heading plus space rather than a rule, because these are two lists of people and not two
   sections of a document.

   390px FIRST, like the rest of this stylesheet: every row and every card is full width, has a
   comfortable target height, and nothing is pinned to a width a phone does not have.
   ============================================================ */
.mr-req { margin-top: 24px; max-width: 620px; }
.mr-reqh { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  margin: 0 0 14px; }
.mr-reqwait { font-size: .93rem; color: var(--ink-soft); margin: 0; }
.mr-reqgroup { margin-bottom: 26px; }
.mr-reqgroup:last-of-type { margin-bottom: 0; }
.mr-reqgh { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  font-weight: 700; color: var(--orange-deep); margin: 0 0 9px; }
.mr-reqrows { display: flex; flex-direction: column; gap: 8px; }

/* a person: the same card grammar .mr-item uses, so a row you PRESS and a row you FOLLOW are
   recognisably the same family of thing on the same page */
.mr-person { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  min-height: 52px; padding: 11px 15px; border-radius: 14px; background: var(--white);
  border: 1px solid rgba(33,29,22,.07); border-left: 3px solid var(--charcoal);
  box-shadow: var(--shadow); font: inherit; color: var(--ink); cursor: pointer;
  transition: transform .18s, box-shadow .18s; }
.mr-person:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.mr-person:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.mr-personn { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.mr-person .mr-arrow { flex: none; }

/* which report — three cards, one chosen. `aria-pressed` carries the state for a screen
   reader; the solid left edge and the tinted face carry it for the eye. Nothing here is a
   radio input, so nothing here can paint itself in an accent colour this product did not
   choose. */
.mr-picks { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
.mr-pick { display: block; width: 100%; text-align: left; padding: 14px 16px;
  border-radius: 14px; background: var(--white); border: 1px solid rgba(33,29,22,.12);
  border-left: 3px solid rgba(33,29,22,.12); font: inherit; color: var(--ink);
  cursor: pointer; }
.mr-pick:hover { border-color: rgba(33,29,22,.22); border-left-color: var(--orange); }
.mr-pick:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.mr-pick.on { background: var(--orange-soft); border-color: var(--orange);
  border-left-color: var(--orange-deep); }
.mr-pickt { display: block; font-weight: 700; margin-bottom: 4px; }
.mr-pickt i { font-style: italic; }
.mr-pickl { display: block; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }

.mr-reqgo { margin: 0 0 4px; }
/* THE SEND MOMENT HOLDS ITS OWN SPACE. `min-height` keeps the confirmation from shoving the
   page when it appears, which is the same anti-jump rule WO75 wrote for the loading shell. */
.mr-reqmsg { margin: 12px 0 0; min-height: 1.5em; font-size: .95rem; color: var(--ink); }
.mr-reqmsg i { font-style: italic; }
.mr-reqagain { margin: 14px 0 0; }
.mr-reqfine { margin: 18px 0 0; font-size: .86rem; color: var(--ink-soft); line-height: 1.55; }
.mr-req .mr-quiet { margin-top: 14px; display: inline-block; }

@media (min-width: 700px) {
  .mr-person { padding: 12px 18px; }
  .mr-pick { padding: 15px 18px; }
}