/* ============================================================
   The makeup guide's plan

   Split out of style.css so the account can render the guide itself
   rather than framing a copy of the consumer site inside a panel. Both
   pages load this; neither owns it.

   The tokens below are the reason this can travel. Every rule here was
   written against the consumer site's palette, and the account has its
   own with different names. Rather than rewrite a hundred and thirty
   rules, the names they use are declared here with the consumer values
   as the fallback, so the file is correct on a page that defines them
   and correct on a page that does not.

   Moved rather than copied, and checked: the split was done with a
   parser that respects strings, comments and nesting, no rule carrying
   both a .mk- selector and any other selector was touched, and the
   declaration count before and after was equal.
   ============================================================ */

:root {
  --mk-ink:        var(--ink, #35242A);
  --mk-ink-soft:   var(--ink-soft, #7D6068);
  --mk-line:       var(--line, #FBDFD8);
  --mk-white:      var(--white, #FFFFFF);
  --mk-cream-2:    var(--cream-2, #FFF3F0);
  --mk-rose-deep:  var(--rose-deep, #BE3B57);
  --mk-coral:      var(--coral, #FF8674);
  --mk-coral-hover: var(--coral-hover, #FF6A55);
  --mk-r-sm:       var(--r-sm, 8px);
  --mk-r-lg:       var(--r-lg, 24px);
  --mk-font-display: var(--font-display, 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif);
}

.mk-intro { max-width: 760px; margin: 2.5rem auto 0; }

.mk-intro h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: .3rem 0 1rem; letter-spacing: -.02em; }

.mk-intro .lead { font-size: 1.08rem; color: var(--mk-ink); max-width: 62ch; }

.mk-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 2rem 0 1.6rem; }

@media (max-width: 720px) {
.mk-entry { grid-template-columns: 1fr; }
}

.mk-entry-card { display: flex; flex-direction: column; gap: .5rem; text-align: left;
  font: inherit; cursor: pointer; width: 100%; }

.mk-entry-k { font-family: var(--mk-font-display, inherit); font-size: 1.25rem; font-weight: 600; }

.mk-entry-go { margin-top: auto; padding-top: .7rem; color: var(--mk-rose-deep); font-weight: 600; font-size: .9rem; }

.mk-honest { margin: 1.6rem 0; }

.mk-honest p { margin: 0; }

.mk-step-head, .mk-plan-head { max-width: 760px; margin: 2.2rem auto 1.4rem; }

.mk-step-head h2, .mk-plan-head h2 { margin: .3rem 0 .7rem; }

.mk-tut-blurb { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.55; }

.mk-deck > .mk-step { display: none; }

.mk-deck > .mk-step.on { display: flex; }

.mk-deck.all > .mk-step { display: flex; }

.mk-deck-nav {
  display: flex; align-items: center; gap: 1rem; justify-content: space-between;
  max-width: 900px; margin: 0 auto 1rem; flex-wrap: wrap;
}

.mk-deck-nav button:disabled { opacity: .4; cursor: not-allowed; }

.mk-dots { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; flex: 1; }

.mk-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1.5px solid var(--mk-rose-deep, #BE3B57); background: transparent;
}

.mk-dot.on { background: var(--mk-rose-deep, #BE3B57); }

.mk-dot:focus-visible { outline: 2px solid var(--mk-rose-deep, #BE3B57); outline-offset: 3px; }

.mk-deck-count {
  max-width: 900px; margin: 0 auto .4rem; text-align: center;
  font-size: .85rem; font-weight: 600;
}

.mk-deck-all { max-width: 900px; margin: 0 auto 2rem; text-align: center; }

@media (max-width: 560px) {
.mk-deck-nav { gap: .6rem; }
.mk-dots { order: -1; flex-basis: 100%; }
.mk-deck-nav > button { flex: 1; }
}

.mk-step-head .muted { max-width: 62ch; }

.mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem;
  max-width: 1000px; margin: 0 auto 2rem; }

.mk-grid-text { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.mk-card { display: flex; flex-direction: column; align-items: center; gap: .5rem;
  text-align: center; font: inherit; cursor: pointer; width: 100%; }

.mk-card-text { align-items: flex-start; text-align: left; }

.mk-card-k { font-weight: 600; font-size: 1.05rem; }

.mk-card.on { border-color: var(--mk-rose-deep); box-shadow: 0 0 0 2px var(--mk-rose-deep) inset; }

.mk-card .mk-face { width: 100%; max-width: 132px; height: auto; }

.mk-back { max-width: 1000px; margin: 0 auto 3rem; }

.mk-back a { color: var(--mk-rose-deep); font-weight: 600; }

.mk-look-row { border: 0; padding: 0; margin: 0 auto 2rem; max-width: 760px; }

.mk-look-row legend { font-weight: 600; font-size: 1.1rem; padding: 0; }

.mk-look-row .muted { margin: .2rem 0 .8rem; }

.mk-pills { display: flex; flex-wrap: wrap; gap: .6rem; }

.mk-pill { flex: 1 1 200px; text-align: left; background: var(--mk-white); color: var(--mk-ink);
  border: 1.5px solid var(--mk-line); border-radius: var(--mk-r-lg); padding: .8rem 1rem;
  font: inherit; cursor: pointer; transition: border-color .15s ease; }

.mk-pill:hover { border-color: var(--mk-coral); }

.mk-pill b { display: block; }

.mk-pill span { display: block; font-size: .84rem; color: var(--mk-ink-soft); margin-top: .15rem; }

.mk-pill.on { background: var(--mk-rose-deep); color: var(--mk-white); border-color: var(--mk-rose-deep); }

.mk-pill.on span { color: rgba(255,255,255,.92); }

.mk-chip { border: 1px solid var(--mk-line); cursor: pointer; font: inherit; margin: 0 .3rem .3rem 0; }

.mk-chip .tiny { opacity: .75; }

.mk-step { display: flex; gap: 1.1rem; max-width: 900px; margin: 0 auto 2.6rem;
  padding-bottom: 2.4rem; border-bottom: 1px solid var(--mk-line); }

.mk-step:last-of-type { border-bottom: 0; }

.mk-step-n span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--mk-rose-deep); color: var(--mk-white); font-weight: 700; font-size: .95rem; }

.mk-step-body { flex: 1; min-width: 0; }

.mk-step-body h3 { margin: .2rem 0 .3rem; }

.mk-lead { color: var(--mk-ink); margin: 0 0 1rem; }

.mk-step-grid { display: grid; grid-template-columns: 240px 1fr; gap: 1.4rem; align-items: start; }

@media (max-width: 700px) {
.mk-step-grid { grid-template-columns: 1fr; }
}

.mk-diagram-wrap { position: sticky; top: 1rem; text-align: center; }

@media (max-width: 700px) {
.mk-diagram-wrap { position: static; }
}

.mk-replay { margin-top: .5rem; background: var(--mk-white); color: var(--mk-rose-deep);
  border: 1.5px solid var(--mk-line); border-radius: 100px; padding: .45rem 1rem;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }

.mk-replay:hover { border-color: var(--mk-rose-deep); }

.mk-how { margin: .8rem 0; padding-left: 1.2rem; }

.mk-how li { margin-bottom: .5rem; }

.mk-place, .mk-approach, .mk-tool, .mk-motion { margin: 0 0 .7rem; }

.mk-approach { font-weight: 600; }

.mk-mistake { background: var(--mk-cream-2); color: var(--mk-ink); border-left: 3px solid var(--mk-coral);
  padding: .7rem .9rem; border-radius: 0 var(--mk-r-sm, 8px) var(--mk-r-sm, 8px) 0; margin: .9rem 0 0; }

.mk-map { background: var(--mk-cream-2); border-radius: var(--mk-r-lg); padding: .9rem 1rem; margin: 0 0 1rem; }

.mk-map h4 { margin: 0 0 .5rem; font-size: .95rem; }

.mk-map ol { margin: 0; padding-left: 1.2rem; }

.mk-map li { margin-bottom: .4rem; }

.mk-picks { margin-top: 1.3rem; }

.mk-pick-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin-top: .5rem; }

.mk-pick { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .9rem;
  border: 1px solid var(--mk-line); border-radius: var(--mk-r-lg); text-decoration: none; color: var(--mk-ink); }

.mk-pick:hover { border-color: var(--mk-coral); }

.mk-pick-t { font-size: .92rem; }

.mk-end { max-width: 760px; margin: 1rem auto 4rem; }

.mk-face { width: 100%; height: auto; display: block; margin: 0 auto; }

.mk-outline { fill: var(--mk-cream-2); stroke: var(--mk-rose-deep); stroke-width: 2.2; }

.mk-feat { fill: var(--mk-ink); }

.mk-feat-l { fill: none; stroke: var(--mk-ink); stroke-width: 2.4; stroke-linecap: round; }

.mk-brow .mk-feat-l { stroke-width: 2; }

.mk-step-grid-wide { grid-template-columns: 1fr; }

.mk-step-grid-wide .mk-diagram-wrap { position: static; margin-bottom: .4rem; }

.mk-step-grid-wide .mk-brow { max-width: 520px; }

.mk-browline { fill: none; stroke-width: 3; }

.mk-sweep { fill: none; stroke: var(--mk-coral-hover); stroke-width: 9; stroke-linecap: round;
  stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .88; }

.mk-flick { stroke-width: 3; }

.mk-zone { fill: var(--mk-coral-hover); opacity: 0; }

.mk-dab { fill: var(--mk-coral-hover); opacity: 0; }

.mk-guide { fill: none; stroke: var(--mk-ink-soft); stroke-width: 1.8; stroke-dasharray: .025 .02; opacity: 0; }

.mk-guide-t { fill: var(--mk-ink); font-size: 11px; font-weight: 600; font-family: inherit; opacity: 0; }

.mk-playing .mk-sweep { animation: mk-draw .85s ease forwards; animation-delay: calc(var(--i, 0) * .16s); }

.mk-playing .mk-zone  { animation: mk-fade .7s ease forwards;  animation-delay: calc(var(--i, 0) * .16s); }

.mk-playing .mk-dab   { animation: mk-pop .5s ease forwards;   animation-delay: calc(var(--i, 0) * .16s + .3s); }

.mk-playing .mk-guide { animation: mk-guide-in .5s ease forwards; animation-delay: calc(var(--i, 0) * .5s); }

.mk-playing .mk-guide-t { animation: mk-fade .4s ease forwards; animation-delay: calc(var(--i, 0) * .5s + .4s); }

.mk-playing .mk-flick { animation-delay: calc(1.8s + var(--i, 0) * .1s); }

.mk-static .mk-sweep { stroke-dashoffset: 0; }

.mk-static .mk-guide { opacity: .85; }

.mk-static .mk-zone { opacity: .34; }

.mk-static .mk-dab, .mk-static .mk-guide-t { opacity: .88; }

@media (prefers-reduced-motion: reduce) {
.mk-playing .mk-sweep { animation: none; stroke-dashoffset: 0; }
.mk-playing .mk-guide { animation: none; opacity: .85; }
.mk-playing .mk-zone { animation: none; opacity: .34; }
.mk-playing .mk-dab, .mk-playing .mk-guide-t { animation: none; opacity: .88; }
}

.mk-home-art { display: grid; place-items: center; }

.mk-home-art svg { width: 100%; max-width: 230px; height: auto; }

.mk-home-art .mk-sweep { animation: mk-draw 1s ease forwards; animation-delay: calc(.4s + var(--i, 0) * .22s); }

@media (prefers-reduced-motion: reduce) {
.mk-home-art .mk-sweep { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 700px) {
.mk-home-art { display: none; }
}

.mk-face-panel { max-width: 900px; margin: 0 auto 2.4rem; }

.mk-face-panel h3 { margin-top: 0; }

.mk-consent-list { margin: .8rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--mk-ink-soft); }

.mk-consent-list li { margin-bottom: .4rem; }

.mk-source { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }

.mk-upload { cursor: pointer; }

.mk-desc { width: 100%; font: inherit; font-size: .92rem; padding: .7rem .8rem;
  border: 1.5px solid var(--mk-line); border-radius: var(--mk-r-lg); background: var(--mk-white); color: var(--mk-ink); }

.mk-desc:focus { outline: none; border-color: var(--mk-rose-deep); }

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

.mk-face-busy { background: var(--mk-cream-2); color: var(--mk-ink); border-radius: var(--mk-r-lg);
  padding: .7rem .9rem; margin: 0 0 1rem; font-size: .92rem; }

.mk-face-busy .tiny { display: block; }

.mk-face-error { background: var(--mk-cream-2); color: var(--mk-ink); border-left: 3px solid var(--mk-rose-deep);
  padding: .8rem .9rem; margin: 0 0 1rem; font-size: .92rem; border-radius: 0 8px 8px 0; }

.mk-onface { margin-top: .5rem; display: block; width: 100%; }

.mk-frame { margin: .8rem 0 0; }

.mk-frame img { width: 100%; border-radius: var(--mk-r-lg); display: block; }

.mk-frame figcaption { margin-top: .4rem; }

.mk-face-panel { border-color: var(--mk-coral); }

.mk-flash { animation: mk-flash 1.4s ease; }

@media (prefers-reduced-motion: reduce) {
.mk-flash { animation: none; }
}

.mk-frame-hint { margin: .6rem 0 0; }

.mk-look-go { max-width: 760px; margin: 1.6rem auto 3rem; }

.mk-look-go .mk-back { margin-top: 1rem; }

.mk-step-status { text-align: left; font-size: .86rem; margin: .5rem 0 0; }

.mk-mannequin { display: grid; grid-template-columns: 150px 1fr; gap: 1.1rem; align-items: start; margin-top: .8rem; }

@media (max-width: 560px) {
.mk-mannequin { grid-template-columns: 1fr; }
}

.mk-mannequin img { width: 100%; border-radius: var(--mk-r-lg); display: block; }

.mk-mannequin p { margin: 0 0 .6rem; }

.mk-undertone-help { margin-top: .9rem; }

.mk-undertone-help summary { cursor: pointer; color: var(--mk-rose-deep); font-weight: 600; font-size: .9rem; }

.mk-undertone-help p, .mk-undertone-help ul { margin-top: .6rem; }

.guide-none .mk-linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--mk-rose-deep); text-decoration: underline; cursor: pointer;
}
/* ------------------------------------------------------------
   Inside the account

   Rendered into a view rather than owning a page, so the column, the
   ground and the top margin all belong to the account. Two nested
   columns is the inset that made this read as a thing within a thing
   back when it was a frame.
   ------------------------------------------------------------ */
#guide-here .mk-plan-head,
#guide-here .mk-step,
#guide-here .mk-deck-nav,
#guide-here .mk-deck-count,
#guide-here .mk-deck-all,
#guide-here .mk-end,
#guide-here .mk-save { max-width: none; margin-left: 0; margin-right: 0; }
#guide-here .mk-plan-head { margin-top: 0; }
/* One step to a slide means one step on screen, so the rule under it
   separates it from nothing. */
#guide-here .mk-step { border-bottom: 0; padding-bottom: 0; }


/* ---------- the look on the face it was built on ----------
   A photograph where the diagram goes, when a tutorial carried one. Sized
   like the diagram it replaces so the step does not jump when it swaps
   in, and capped in height because a portrait photograph is much taller
   than a 200x260 drawing. */
.mk-face-photo { margin: 0; position: relative; }

/* The strokes sit over the photograph in the same box, letterboxing the
   same way, so they stay on the face at every width. */
.mk-face-over {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-height: 420px;
  pointer-events: none;
}
.mk-face-photo.has-over img { position: relative; }

.mk-face-photo img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 14px;
  background: #FBF7F5;
}

.mk-face-photo figcaption { margin-top: .5rem; text-align: center; }