/* M&Co client portal — shared visual system for the Home/Content pages
   (Stage C prototype, reporting-sandbox only).

   This is a direct translation of the real mandcomedia.com visual system,
   not a parallel "portal design system": colours, type pairing, button
   shapes and the ember/motif/white-card composition are all lifted from
   the live site and from assets already used elsewhere in this codebase
   (the Reporting dashboard's own header, Content OS's login screen).
   PP Museum is self-hosted here (public/_mc/fonts/pp-museum-300.woff2,
   extracted from the existing embedded copy in reporting-sandbox's own
   index.html) for display headings only; Poppins (already loaded via
   Google Fonts by each page) remains the body/UI typeface throughout. */

@font-face {
  font-family: 'PP Museum Portal';
  src: url('/_mc/fonts/pp-museum-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --butter: #F7EDDC;
  --butter-d: #EDE0C8;
  --charcoal: #2F2B28;
  --ember: #6E1312;
  --ember-lt: #8a2020;
  --baby-blue: #C5DFF4;
  --baby-blue-tint: rgba(197, 223, 244, 0.3);
  --bb-text: #3A6E9A;
  --white: #FFFFFF;
  --pos: #3A7D44;
  --pos-bg: #edf5ef;
  --neg: #B94040;
  --neg-bg: #f9edec;
  --line: rgba(47, 43, 40, 0.12);
  --line-on-ember: rgba(247, 237, 220, 0.28);
  --baby-blue-soft: rgba(197, 223, 244, 0.42);
  /* The portal's one horizontal grid: the nav, Home, Content, the shared footer
     and the mounted Reporting dashboard all derive from these two values. */
  --portal-max: 1280px;
  --portal-gutter: clamp(20px, 4vw, 40px);
  /* Shared type scale for the approval cards -- every element of the same
     semantic role reads from these, never from per-post values. */
  --fs-label: 11.5px;        /* uppercase field / media / block labels */
  --ls-label: 0.09em;
  --fs-meta: 13px;           /* planned date, status, helper text, text actions */
  --fs-body: 15px;           /* captions, script, feedback-edit text */
  --fs-lead: clamp(20px, 2vw, 24px);      /* Hook, the client's own feedback */
  --fs-lead-sm: clamp(17px, 1.6vw, 19px); /* client action, earlier feedback */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.portal-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- top nav: matches the Reporting dashboard's own ember header exactly,
   so Home / Content / Reporting read as one product ---- */
.portal-nav {
  background: var(--ember);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Shared desktop content container: the same left/right boundary used by
   the nav and every Home section, established from the four-thumbnail
   grid's own width. One definition, reused everywhere, so alignment stays
   consistent as the portal grows rather than each section centering
   itself independently at a slightly different width. */
.portal-container {
  max-width: var(--portal-max);
  margin: 0 auto;
  padding: 0 var(--portal-gutter);
}
.portal-nav-inner {
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.portal-nav-brand img {
  height: 20px;
  width: auto;
  display: block;
}
.portal-nav-links {
  display: flex;
  gap: clamp(18px, 3vw, 30px);
}
.portal-nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(247, 237, 220, 0.62);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.portal-nav-links a.active {
  color: var(--butter);
  border-bottom-color: var(--butter);
}
.portal-nav-links a.soon {
  cursor: default;
  color: rgba(247, 237, 220, 0.32);
}
/* Logout: an account action, not a portal destination -- quieter than
   Home/Content/Reporting, never gets the active-page underline, and is
   set off with its own divider so it doesn't read as a fourth section. */
.portal-nav-links a.portal-nav-logout {
  color: rgba(247, 237, 220, 0.45);
  font-weight: 400;
  padding-left: clamp(14px, 2vw, 22px);
  border-left: 1px solid rgba(247, 237, 220, 0.22);
  border-bottom: none;
}
.portal-nav-links a.portal-nav-logout:hover {
  color: rgba(247, 237, 220, 0.75);
}

/* ---- mobile nav: hamburger + a plain panel dropping beneath the header, same ember field,
   same link typography as the desktop row -- an extension of the header, not a separate
   generic drawer/overlay component. Hidden entirely above the mobile breakpoint (see
   @media (max-width: 640px) below), regardless of open/closed state, so a resize can never
   leave it visible on desktop. ---- */
.portal-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 11px;
  margin: -11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.portal-nav-toggle-bars,
.portal-nav-toggle-bars::before,
.portal-nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--butter);
  transition: transform 0.18s ease, opacity 0.18s ease, top 0.18s ease;
}
.portal-nav-toggle-bars { position: relative; }
.portal-nav-toggle-bars::before,
.portal-nav-toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
}
.portal-nav-toggle-bars::before { top: -6px; }
.portal-nav-toggle-bars::after { top: 6px; }
.portal-nav-toggle.is-open .portal-nav-toggle-bars { background: transparent; }
.portal-nav-toggle.is-open .portal-nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.portal-nav-toggle.is-open .portal-nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.portal-mobile-menu {
  display: none;
  background: var(--ember);
  border-top: 1px solid rgba(247, 237, 220, 0.22);
}
.portal-mobile-menu-inner {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
  padding-bottom: 10px;
}
.portal-mobile-menu-link {
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  color: rgba(247, 237, 220, 0.68);
  padding: 14px 0;
  border-bottom: 1px solid rgba(247, 237, 220, 0.14);
}
.portal-mobile-menu-link.active { color: var(--butter); }
.portal-mobile-menu-logout {
  text-decoration: none;
  font-size: 16px;
  color: rgba(247, 237, 220, 0.45);
  padding: 18px 0 8px;
}

/* ---- shared layout ---- */
.portal-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 90px;
}
/* Stage D: the mounted Reporting dashboard defines its own centered max-width
   (1080px) internally, scoped under .reporting-scope. This resets the portal's
   own column constraint for that one page so Reporting keeps its original width
   and spacing instead of being squeezed into the narrower Home/Content column. */
.portal-main.portal-main--reporting {
  max-width: none;
  padding: 0;
}
/* Home is a stack of full-width sections that own their own padding, so the
   90px bottom padding meant for Content's card list would only add a blank
   strip above the shared footer. */
.portal-main.portal-main--home {
  padding: 0;
}

.portal-eyebrow {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 600;
  margin: 0 0 10px;
}
.portal-h1 {
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 38px);
  margin: 0 0 10px;
  line-height: 1.2;
}
.portal-sub {
  font-size: 15px;
  color: rgba(47, 43, 40, 0.7);
  margin: 0;
  line-height: 1.65;
  max-width: 54ch;
}

/* ---- Latest Content: adapted from the website's project-grid section
   ("Marketing with purpose." / four large project images / minimal
   labels). Deliberately wider than the 900px application column -- an
   image-led website section, not four thumbnails in a content column.
   Purely visual/contextual: no metrics, no approval controls. ---- */
.recent-content {
  margin: 0 calc(50% - 50vw) 0;
  padding: 64px 0 72px;
}
.recent-content-heading {
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(24px, 3vw, 30px);
  margin: 0 0 28px;
}
.recent-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.recent-content-tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  border-radius: 3px;
}
.recent-content-caption {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(47, 43, 40, 0.55);
  font-weight: 600;
}
.recent-content-cta {
  margin-top: 36px;
  text-align: center;
}
/* Calm empty state when there's no real, client-visible media to preview yet -- same muted tone
   already established by .field-note/.state-empty elsewhere on this sheet, not a new colour or
   treatment. */
.recent-content-empty {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(47, 43, 40, 0.6);
  margin: 0;
}

/* ---- Cream editorial section: two peer columns -- our monthly direction
   (left) and what we need from the client (right) -- separated by
   typography, spacing and rules alone. No motif: tried several oversized
   brand-graphic treatments here and none read as intentional rather than
   decorative, so it's left out per the website's own restraint elsewhere. ---- */
.services-split {
  background: var(--butter);
  margin: 0 calc(50% - 50vw) 0;
  padding: 64px 0;
}
.services-split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}
.services-split-left { padding-top: 8px; }
.services-split-eyebrow {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 600;
  margin: 0 0 10px;
}
.services-split-heading {
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 34px);
  line-height: 1.25;
  margin: 0 0 16px;
  max-width: 14ch;
}
.services-split-left .services-split-heading { margin-bottom: 14px; max-width: none; }
.services-split-body {
  font-size: 16px;
  color: rgba(47, 43, 40, 0.75);
  line-height: 1.65;
  max-width: 46ch;
  margin: 0;
}
.services-split-right { padding-top: 8px; }
.services-split-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(47, 43, 40, 0.15);
  font-size: 16px;
}
.services-split-row:first-child { padding-top: 0; }
.services-split-row-value {
  font-weight: 600;
  font-size: 19px;
  flex: none;
}
.services-split-list { margin-bottom: 26px; }
/* "Submit review": under the month's counts, the one place the client tells M&Co they have reviewed
   it. Quiet when there is nothing to do (a single line saying when it was submitted). */
.review-submit { margin: -6px 0 26px; }
.review-submit-status { margin: 0 0 10px; font-size: var(--fs-meta); line-height: 1.5; color: var(--charcoal); font-weight: 500; }
.review-submit[data-review-state="submitted"] .review-submit-status { margin-bottom: 0; color: rgba(47, 43, 40, 0.6); font-weight: 400; }
.review-submit-summary { margin: 0 0 12px; font-size: var(--fs-meta); line-height: 1.5; color: rgba(47, 43, 40, 0.75); }
.review-submit-hint { margin: 10px 0 0; font-size: var(--fs-meta); line-height: 1.5; color: rgba(47, 43, 40, 0.6); }
.review-submit .inline-error { margin-top: 10px; }
/* The same prompt again after the last post, where the client is when they finish: a panel of its
   own, like a post, so the next step is in front of them. Shown only while there is a button. */
.review-submit--end { margin: 0; background: var(--white); border-radius: 28px; padding: clamp(24px, 3.5vw, 44px); }
.review-submit--end .review-submit-summary { font-size: var(--fs-body, 16px); color: var(--charcoal); }

/* ---- buttons: the real website's pill system, reused as-is ---- */
/* Button hover/focus behaviour below is copied from mandcomedia.com's own
   button CSS (Elementor kit-8 globals), not invented: every real button
   there transitions with `all 0.3s ease`, no transform/movement, and the
   two outline-style variants (accent-fill and secondary-fill) both invert
   to a solid fill on hover -- extracted from the live site's own
   stylesheet rules and its --e-global-color-* custom properties
   (primary=#6E1312, secondary=#F7EDDC, accent=#C5DFF4, 05d5f36=#FFFFFF).
   :hover is gated behind (hover:hover) so touch taps never get a sticky
   "stuck-hovered" state; :focus-visible reproduces the same treatment for
   keyboard users (the site itself only used :focus, not :focus-visible). */
.btn {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 54px;
  padding: 14px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  white-space: nowrap;
  outline: none;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
/* Burgundy carries primary/action emphasis, matching the website's own
   brand-action colour; pale-blue is reserved for backgrounds and quiet
   supporting moments rather than doubling as a button fill. No literal
   website equivalent exists for a solid-fill button, so only the
   transition timing above is reused here; the darken-on-hover itself
   predates this pass. */
.btn-primary { background: var(--ember); color: var(--butter); }
.btn-approve { background: var(--ember); color: var(--butter); }
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--ember-lt); }
  .btn-approve:hover:not(:disabled) { background: var(--ember-lt); }
}
.btn-primary:focus-visible:not(:disabled) { background: var(--ember-lt); }
.btn-approve:focus-visible:not(:disabled) { background: var(--ember-lt); }

/* Outlined-burgundy family (REVIEW CONTENT, Cancel, Request changes) --
   the website's own cream/secondary-fill outline button (e.g. "EXPLORE
   SERVICES"): base is a 2px burgundy border with burgundy text; on
   hover/focus it inverts to a solid burgundy fill with white text,
   exactly like the site's dd1902b button rule. */
.btn-ghost, .btn-changes { background: transparent; color: var(--ember); border: 2px solid var(--ember); padding: 12px 22px; }
.btn-changes { padding: 14px 24px; }
@media (hover: hover) {
  .btn-ghost:hover:not(:disabled), .btn-changes:hover:not(:disabled) { background: var(--ember); color: var(--white); }
}
.btn-ghost:focus-visible:not(:disabled), .btn-changes:focus-visible:not(:disabled) { background: var(--ember); color: var(--white); }
.btn-small { padding: 10px 18px; font-size: 12.5px; }

/* Pale-blue/accent-fill family (VIEW YOUR RESULTS, CONTACT MADDISON) --
   the website's own accent-fill button (e.g. "VIEW OUR RESULTS", "START A
   CONVERSATION"): base has a same-colour-as-fill border so hover doesn't
   shift layout; on hover/focus the fill turns white and the border
   becomes solid burgundy, exactly like the site's 56782d1/5dcccb7 rules.
   Reserved for website-composition CTAs modeled literally on marketing
   sections, distinct from the in-app action buttons above which are
   deliberately burgundy per the portal's own action-emphasis rule. */
.btn-marketing { background: var(--baby-blue); color: var(--ember); border: 1px solid var(--baby-blue); }
@media (hover: hover) {
  .btn-marketing:hover:not(:disabled) { background: var(--white); border-color: var(--ember); }
}
.btn-marketing:focus-visible:not(:disabled) { background: var(--white); border-color: var(--ember); }

/* ---- content page intro: the website's Services-style split composition
   (heading on the left, a ruled list on the right) rather than a
   conventional application header. Reuses .services-split-row/-list for
   the ruled counts so both pages share one ruled-list treatment. ---- */
.content-intro {
  background: var(--white);
  margin: 0 calc(50% - 50vw) 0;
  padding: 56px 0;
}
.content-intro-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
}
.content-eyebrow {
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ember);
  font-weight: 600;
  margin: 0 0 10px;
}
.content-heading {
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.4vw, 34px);
  margin: 0 0 8px;
  line-height: 1.2;
}
.content-subtitle {
  font-size: 13.5px;
  color: rgba(47, 43, 40, 0.55);
  margin: 0;
}

/* ---- Content approval panels: adapted from the website's Services-page
   composition -- a full-width coloured field (pale-blue) containing large
   rounded white panels, one per concept (platform variants share the one
   panel via the existing tab switcher, not duplicate panels), each with
   big imagery on one side and content on the other, generous internal
   padding, and substantial vertical space between panels. ---- */
.concept-field {
  background: var(--baby-blue);
  margin: 0 calc(50% - 50vw) 0;
  padding: 56px 0 72px;
}
.concept-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.concept-panel {
  background: var(--white);
  border-radius: 28px;
  padding: clamp(24px, 3.5vw, 44px);
}

/* Platform tabs: navigation is the dominant signal (burgundy underline +
   stronger weight on the selected tab); the per-platform state mark beside
   each name is deliberately secondary -- text glyphs, never pills/badges. */
.variant-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.variant-tab {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 0 10px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  color: rgba(47, 43, 40, 0.5);
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.variant-tab.active {
  color: var(--ember);
  font-weight: 600;
  border-bottom-color: var(--ember);
}
@media (hover: hover) {
  .variant-tab:not(.active):hover { color: rgba(47, 43, 40, 0.8); }
}
.variant-tab:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
.tab-mark { font-size: 11px; font-weight: 400; letter-spacing: 0; opacity: 0.8; }
.variant-tab.state-approved .tab-mark { color: var(--pos); }
.variant-tab.state-changes_requested .tab-mark { color: var(--neg); }

.concept-panel-body {
  display: flex;
  gap: clamp(24px, 4vw, 48px);
  align-items: flex-start;
}
/* No frame/background/forced box around the creative itself -- the image is
   left to its own natural aspect ratio (portrait stays portrait) and sized
   only by width, the same way an image reads on the website's Services
   page. The panel's white background is the only surface it sits on. The
   fixed aspect-ratio box is kept solely for the .empty (no-creative-yet)
   placeholder below, which has no image to size itself by. */
.concept-panel-media {
  flex: 0 0 39%;
  max-width: 440px;
}
.concept-panel-media img { width: 100%; height: auto; display: block; border-radius: 16px; }
.concept-panel-media.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: var(--butter-d);
  font-size: 12px;
  color: rgba(47, 43, 40, 0.4);
  text-align: center;
  padding: 12px;
}
/* ---- Media components (local prototype states) ---- */
/* "To be filmed" Reel placeholder: a plain solid Butter field, 9:16 like the
   eventual video, ember type only -- no shape, motif, icon or pattern. */
.media-tbf {
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background: var(--butter);
  color: var(--ember);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 3vw, 32px);
}
.media-tbf-format { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; }
.media-tbf-title {
  margin: 0 0 8px;
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
}
.media-tbf-sub { margin: 0; font-size: 13.5px; line-height: 1.5; }

/* Inline video: poster + one restrained play control; the real <video> (with
   native controls) replaces it on click -- never autoplays. */
.video-launch {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  border-radius: 16px;
}
.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(247, 237, 220, 0.94);
  color: var(--ember);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  transition: background 0.2s, color 0.2s;
}
@media (hover: hover) {
  .video-launch:hover .video-play { background: var(--ember); color: var(--butter); }
}
/* A video with no poster has nothing to size it, so it gets a frame of its own -- vertical for a
   Reel, feed-shaped otherwise -- instead of collapsing to a bare play button. */
.video-launch--vertical, .video-launch--feed { background: var(--butter-d); }
.video-launch--vertical { aspect-ratio: 9 / 16; }
.video-launch--feed { aspect-ratio: 4 / 5; }
.video-launch:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.media-video-el { display: block; width: 100%; height: auto; border-radius: 16px; }

/* A picture that has not been requested yet holds a frame of the right shape, so nothing jumps
   when it arrives: feed-shaped, or vertical for a Reel's poster. Once it has loaded it takes its
   own shape, as before. */
img.mc-lazy[data-pending] { aspect-ratio: 4 / 5; height: auto; background: var(--butter-d); }
img.mc-lazy--vertical[data-pending] { aspect-ratio: 9 / 16; }

/* Carousel: obviously several slides without over-explaining -- a "5 slides"
   label above, always-visible arrows on hover-capable devices, and (on touch /
   narrow screens) the next slide peeking in. Native scroll-snap underneath
   (touch swipe for free); no dots, counter or instructions; no autoplay. */
.media-kind {
  margin: 0 0 12px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(47, 43, 40, 0.55);
}
.media-carousel { position: relative; border-radius: 16px; }
.media-carousel:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.carousel-track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 16px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; user-select: none; }
@media (hover: none), (max-width: 640px) {
  .carousel-track { gap: 10px; }
  .carousel-slide { flex-basis: 88%; }
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 237, 220, 0.96);
  color: var(--ember);
  /* Hairline + soft shadow so the cream disc reads on light and dark artwork alike. */
  box-shadow: 0 0 0 1px rgba(47, 43, 40, 0.16), 0 2px 8px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-btn[aria-disabled="true"] { cursor: default; }
.carousel-btn:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (hover: hover) {
  .carousel-btn:not([aria-disabled="true"]):hover { background: var(--ember); color: var(--butter); }
}
@media (hover: none) { .carousel-btn { display: none; } }

.concept-panel-content { flex: 1 1 61%; min-width: 0; }
/* Primary heading: "01 / Post One" -- one uniform PP Museum run (matching the
   website's own Services-page numbering exactly: same weight/size/colour for
   the number and the title, no separate badge/chip, no colour split). This is
   a stable, generic per-Post label -- never derived from hook/caption -- so
   platform tabs and copy can change beneath it without the heading moving. */
.concept-number {
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.3;
  color: rgba(47, 43, 40, 0.92);
  margin: 0 0 18px;
}
/* Keeps body copy readable as the shared card width grows -- the extra room
   becomes right-column whitespace rather than longer text lines. */
.concept-panel-content .concept-number,
.concept-panel-content .field-value { max-width: 60ch; }

/* Text-led editorial treatment for LinkedIn / no-media concepts -- reads
   as a pulled-quote article moment rather than a record missing media,
   with the content column expanding to fill the panel. */
.concept-panel.text-led .concept-panel-body { display: block; }
.concept-panel.text-led .concept-panel-content { max-width: 68ch; }

.field-label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(47, 43, 40, 0.55);
  font-weight: 600;
  margin: 16px 0 5px;
}
.field-label:first-child { margin-top: 0; }
.field-value {
  font-size: var(--fs-body);
  line-height: 1.65;
  margin: 0;
  white-space: pre-wrap;
}
.field-value.hook {
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.3;
}

/* ---- header: Post number left, SELECTED platform's status right. Plain
   text -- the wording carries the meaning, colour is secondary. ---- */
.concept-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 18px;
}
.concept-panel-content .concept-header .concept-number { margin: 0; max-width: none; }
.concept-title-wrap { min-width: 0; flex: 1 1 auto; }
.planned-date { margin: 4px 0 0; font-size: var(--fs-meta); line-height: 1.45; color: rgba(47, 43, 40, 0.55); }
.concept-status {
  flex: 0 1 auto;
  margin: 0;
  font-size: var(--fs-meta);
  line-height: 1.45;
  font-weight: 600;
  color: rgba(47, 43, 40, 0.78);
  text-align: right;
  white-space: nowrap;
}
.concept-status[data-state="approved"] { color: var(--pos); }
.concept-status[data-state="changes_requested"] { color: var(--neg); }
.field-note { margin: 14px 0 0; font-size: var(--fs-meta); line-height: 1.5; color: rgba(47, 43, 40, 0.6); }

/* ---- client feedback: restrained text actions, not primary buttons ---- */
/* ---- "What we need from you": an action for the client, so it gets its own
   cream block with real hierarchy -- editorial, not an alert (no icon, no
   warning colour, no exclamation). ---- */
.client-action {
  margin-top: 22px;
  width: fit-content;
  max-width: 100%;
  padding: 11px 22px 13px;
  background: var(--butter);
  border-radius: 14px;
}
.client-action-label {
  margin: 0 0 4px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ember);
}
.client-action-text {
  margin: 0;
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: var(--fs-lead-sm);
  line-height: 1.35;
  color: var(--ember);
}
.client-action-text + .client-action-text { margin-top: 6px; }

/* ---- "Your feedback": the client's own words are one of the most important
   things on the card, so they sit in a pale-blue block with the text prominent
   and the Edit / Delete actions quiet beneath. ---- */
.feedback-block {
  margin-top: 28px;
  padding: 26px 28px 24px;
  background: var(--baby-blue-soft);
  border-radius: 18px;
}
.feedback-block-label {
  margin: 0 0 12px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ember);
}
.feedback-block-text {
  margin: 0;
  font-family: 'PP Museum Portal', 'Poppins', sans-serif;
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.35;
  white-space: pre-wrap;
}
.feedback-block-text + .feedback-block-text { margin-top: 10px; }
.feedback-block-next { margin: 16px 0 0; font-size: var(--fs-meta); line-height: 1.55; color: rgba(47, 43, 40, 0.68); }
.feedback-block .text-actions { margin-top: 14px; }
.feedback-block .feedback-box { margin-top: 0; border: 0; background: var(--white); }
/* Earlier feedback that M&Co has already acted on: read-only history, quieter
   than active feedback, never editable. */
.feedback-block--previous { padding: 22px 0 0; background: none; border-radius: 0; border-top: 1px solid var(--line); }
.feedback-block--previous .feedback-block-text { font-size: var(--fs-lead-sm); color: rgba(47, 43, 40, 0.75); }
.feedback-block--previous .feedback-block-label { color: rgba(47, 43, 40, 0.55); }
.text-actions { margin: 10px 0 0; font-size: var(--fs-meta); color: rgba(47, 43, 40, 0.6); }
.text-action-sep { margin: 0 8px; color: rgba(47, 43, 40, 0.35); }
.text-action {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  color: var(--ember);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(110, 19, 18, 0.35);
  text-underline-offset: 3px;
}
@media (hover: hover) { .text-action:hover:not(:disabled) { text-decoration-color: var(--ember); } }
.text-action:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 2px; }
.text-action:disabled { opacity: 0.5; cursor: default; }

/* ---- notes / feedback: part of the same designed module ---- */
.notes-block { margin-top: 18px; }
.note-item {
  background: var(--butter);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.note-item .note-meta { font-size: 11px; color: rgba(47, 43, 40, 0.5); margin-bottom: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

.feedback-box {
  margin-top: 18px;
  border: 1px solid rgba(58, 110, 154, 0.25);
  border-radius: 14px;
  padding: 16px;
  background: var(--baby-blue-tint);
}
.feedback-box textarea {
  width: 100%;
  border: none;
  resize: vertical;
  min-height: 76px;
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.5;
  outline: none;
  background: transparent;
}
.feedback-box .feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.action-row {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.inline-error {
  color: var(--neg);
  font-size: var(--fs-meta);
  margin-top: 12px;
}
.inline-success {
  color: var(--pos);
  font-size: 13px;
  margin-top: 12px;
}

/* ---- states ---- */
.state-loading, .state-empty, .state-error {
  padding: 70px 20px;
  text-align: center;
  color: rgba(47, 43, 40, 0.6);
  font-size: 14.5px;
}
.state-error { color: var(--neg); }
.spinner {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--ember);
  animation: spin 0.8s linear infinite;
  margin: 0 auto 14px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- login gate: ember field + motif + white card, matching Content OS's
   own staff login screen composition ---- */
.login-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  background: var(--ember);
  overflow: hidden;
}
.login-screen-motif {
  position: absolute;
  top: -4%;
  right: 0;
  height: 108%;
  width: auto;
  /* mco-motif.svg's own fill is already Butter (#F7EDDC) -- full opacity so it renders as that
     true colour rather than blended/muted against the ember field beneath it. */
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.login-stack {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 370px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.login-mark { height: 24px; width: auto; }
.login-card {
  background: var(--white);
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.login-card h1 { font-family: 'PP Museum Portal', 'Poppins', sans-serif; font-weight: 300; font-size: 24px; margin: 0 0 6px; }
.login-card p { font-size: 13.5px; color: rgba(47, 43, 40, 0.6); margin: 0 0 22px; }
.login-card input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 14px;
  outline: none;
}
.login-card input:focus { border-color: var(--ember); }
.login-card .btn { width: 100%; justify-content: center; }
.login-error { color: var(--neg); font-size: 13px; margin-top: 10px; }

/* ---- mobile ---- */
@media (max-width: 640px) {
  .portal-nav-inner { padding-top: 14px; padding-bottom: 14px; gap: 8px; }
  .portal-nav-brand img { height: 13px; }
  .portal-nav-links { display: none; }
  .portal-nav-links a { font-size: 12px; }
  .portal-nav-links a.portal-nav-logout { padding-left: 9px; }
  .portal-nav-toggle { display: inline-flex; }
  .portal-mobile-menu:not([hidden]) { display: block; }
  /* On a narrow viewport the motif renders wider than the screen itself (height:108% of a
     nearly full-height container, at its fixed aspect ratio), so it was crossing behind the
     wordmark near the top. Shifted further right so it stays a decorative edge element rather
     than overlapping the logo -- position only, same asset, same colour, same desktop rule
     (untouched, this override only applies inside this breakpoint). */
  .login-screen-motif { right: -70%; }
  .recent-content { padding: 40px 0 48px; }
  .recent-content-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .services-split { padding: 44px 0; }
  .services-split-inner { grid-template-columns: 1fr; gap: 40px; }
  .services-split-heading { max-width: none; }
  .recent-content-cta { margin-top: 28px; }
  .content-intro { padding: 32px 0 26px; }
  .content-intro-split { grid-template-columns: 1fr; gap: 20px; }
  .concept-field { padding: 32px 0 40px; }
  .concept-list { gap: 28px; }
  .concept-panel { border-radius: 20px; padding: 22px; }
  /* Mobile reading order: the Post's identity and review state (heading, planned
     date, status) come BEFORE the media, then tabs and everything else. The
     content column is flattened (display: contents) so its existing children can
     be ordered around the media -- nothing is duplicated, and desktop keeps the
     media-left / content-right layout untouched. */
  .concept-panel-body { flex-direction: column; align-items: stretch; gap: 0; }
  .concept-panel-content { display: contents; }
  .concept-panel-content > * { order: 3; }
  .concept-panel-content > .concept-header { order: 1; }
  .concept-panel-media { order: 2; flex-basis: auto; max-width: none; width: 100%; margin-bottom: 22px; }
  .concept-panel-media.empty { aspect-ratio: 4/5; }
  .action-row .btn { flex: 1; justify-content: center; }
  .variant-tabs { gap: 6px 14px; }
  .variant-tab { font-size: 11px; letter-spacing: 0.03em; gap: 5px; }
  .concept-header { margin-bottom: 8px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .planned-date { color: rgba(47, 43, 40, 0.5); }
  .concept-status { white-space: normal; text-align: left; }
}

/* ---- shared portal footer (rendered by portal-shell.js for pages that opt in)
   Full-bleed ember, inner content on the SAME .portal-container grid as the nav
   and every section. Quiet by design: the client's own name and the three
   portal destinations -- nothing else. ---- */
.portal-footer {
  background: var(--ember);
  color: var(--butter);
}
.portal-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding-top: 17px;
  padding-bottom: 17px;
}
.portal-footer-rule {
  height: 1px;
  background: var(--line-on-ember);
  margin: 0;
  border: 0;
}
.portal-footer-client {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.portal-footer-links { display: flex; gap: clamp(18px, 3vw, 30px); }
.portal-footer-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(247, 237, 220, 0.62);
  padding: 3px 0 1px;
  border-bottom: 2px solid transparent;
}
@media (hover: hover) {
  .portal-footer-links a:hover { color: var(--butter); border-bottom-color: var(--butter); }
}
.portal-footer-links a:focus-visible { outline: 2px solid var(--butter); outline-offset: 4px; color: var(--butter); }
/* Content's pale-blue approval field runs straight into the footer. */
.portal-main.portal-main--content { padding-bottom: 0; }

@media (max-width: 640px) {
  .client-action { padding: 11px 18px 13px; margin-top: 20px; }
  .feedback-block { padding: 22px 20px 22px; margin-top: 22px; }
  .feedback-block--previous { padding: 20px 0 0; }
  .portal-footer-inner { padding-top: 12px; padding-bottom: 12px; gap: 2px 40px; }
}

/* ---- Reporting mount integration (container/width only) -------------------
   The extracted dashboard (public/_mc/reporting-mount) is frozen; these rules
   live in the portal layer and only (a) put its outer content on the shared
   portal grid instead of its own 1080px column, (b) retire its legacy footer
   (the shared portal footer replaces it), and (c) give its relocated Download
   PDF trigger a home. Screen-only where they affect width, so the dashboard's own
   print layout (which forces full width) is untouched. */
.portal-main--reporting .reporting-scope { flex: 1 0 auto; min-height: 0; }
.portal-main--reporting .reporting-scope > footer { display: none; }
@media screen {
  .portal-main--reporting .reporting-scope main.page {
    max-width: var(--portal-max);
    padding-left: var(--portal-gutter);
    padding-right: var(--portal-gutter);
  }
  /* The month tabs are a full-width sticky bar whose ::before spacer was hard-coded
     to the old 1080px column; recompute it so the first tab's label lines up with the
     report content edge (14px tab padding + the bar's 2px flex gap). */
  .portal-main--reporting .reporting-scope .tabs::before,
  .portal-main--reporting .reporting-scope .tabs::after {
    width: calc(max(0px, (100% - var(--portal-max)) / 2) + var(--portal-gutter) - 16px);
  }
}
.reporting-scope .portal-report-actions { display: flex; justify-content: flex-end; margin: 0 0 18px; }
@media print { .reporting-scope .portal-report-actions { display: none !important; } }