/* DuSunnah's drawings on the production home page (public/home.html). The pictures
   are added by production-guard.js as figure.taste-doodle[data-doodle]; this file
   only places them. There is no frame, no tile and no caption: each drawing stands
   straight on the light page (production-light.css) and crosses an edge on purpose.
   - hero: the supervised meeting sits on the top edge of the first card, the
     cushions resting across the line, the lantern hanging under the headline.
   - benefits: the key hangs from that same line, the top edge of this card; the
     envelope runs towards the card's right edge.
   - steps: this section is out of any card, straight on the page. The road enters at the
     top edge and runs down in reading order: past the paper and reed pen (step 1), the
     sealed envelope (step 2), into the street in front of the masjid, beside the tea
     tray (step 3). The heading and the three steps share one left edge beside it.
   - workspace: the lantern hangs from the card's top edge and the table stands on its
     bottom edge, the legs running into the edge as into a floor.
   On tablets and phones the page is one column and a cord cannot reach an edge, so no
   loose cord is shown there: each drawing is cut just above the ring its lantern or
   key hangs from, and the lantern and the key hang free, like the stars.
   Sizes are in cqw (1% of the panel's width), so the composition holds at every
   width; the width and height attributes on each img keep the space reserved. */

#app .public-shell:has(.public-hero) {
  main {container-type: inline-size;}
  .taste-figure[data-doodle] {display: block; margin: 0; padding: 0; gap: 0; background: none; border: 0; border-radius: 0; box-shadow: none; position: relative; z-index: 2;} /* taste-skill-ignore: removes the effect */
  .taste-figure[data-doodle] img {display: block; width: 100%; height: auto; max-width: none; object-fit: contain;}
  /* The hero's drawing stays under the hero's words (they sit at z-index 1). */
  .public-hero > .taste-figure[data-doodle] {z-index: 0;}
  .public-hero[data-taste] {padding-bottom: 0;}
  /* The workspace drawing ends on the card's bottom edge: the legs run into the edge,
     which is the floor the table stands on. Nothing below the card. */
  .public-section.taste-workspace {padding-bottom: 0;}
  .public-section.taste-workspace > .card {overflow: clip; margin-bottom: 0;}
  /* The card's words stay above its drawing wherever the two meet. */
  .taste-workspace .card > :not(.taste-figure) {position: relative; z-index: 3;}
}

/* ---- Desktop -------------------------------------------------------------- */
@media (min-width: 1024px) {
  #app .public-shell:has(.public-hero) {
    /* Under the headline, beside the text; the cushions sit across the bottom edge. */
    .public-hero > .taste-figure[data-doodle] {grid-column: 1 / -1; grid-row: 2 / span 2; justify-self: end; align-self: end; width: 55cqw; margin: -2cqw 6cqw -1.9cqw 0;}

    /* The key hangs from the top edge at the far right; the envelope beside the three
       statements stands clear of the bottom edge (at most 500px wide, so on the widest
       panel its lowest corner keeps about 40px of card below it). The left margin keeps
       the right edge where 42cqw puts it, so the key's cord stays clear of the hero's
       cushion where both meet the card's top edge. */
    .taste-benefits > .taste-figure[data-doodle] {grid-column: 2; grid-row: 1 / span 2; justify-self: start; align-self: start; width: min(42cqw, 500px); margin: -64px 0 calc(-64px - 2cqw) calc(37.3cqw - 24px - min(42cqw, 500px));}

    /* Beside the card's words, from the card's top edge to its bottom edge (at least
       420px, so the lines keep their weight on a small laptop). */
    .taste-workspace .card > .taste-figure[data-doodle] {grid-column: 2; grid-row: 1 / -1; justify-self: end; align-self: start; width: max(41cqw, 420px); max-width: none; margin: -48px 0 -48px 0;}
  }
}

/* ---- The path and its three steps (tablet and desktop) ----------------------------
   The drawing is the layout. --path is its width and --tall its height; the grid's four
   rows divide that height where the drawing changes: the open road at the top (15%),
   the paper and pen (22%), the sealed envelope (23%) and the masjid with the tea (40%).
   The heading stands beside the open road and each step beside its object, all on one
   left edge 40px clear of the drawing. A row grows if its words need more room, so text
   never runs into the next step. The section has no top padding, so the road comes out
   of the card above at its bottom edge; the heading keeps its own 48px from that edge. */
@media (min-width: 768px) {
  #app .public-shell:has(.public-hero) {
    .public-section.taste-steps {
      --path: 36cqw; --tall: calc(var(--path) * 1.3347);
      display: grid; grid-template-columns: calc(var(--path) + 40px) minmax(0, 1fr); gap: 0; align-items: center; padding: 0;
      grid-template-rows: minmax(min-content, calc(var(--tall) * .154)) minmax(min-content, calc(var(--tall) * .215)) minmax(min-content, calc(var(--tall) * .231)) minmax(min-content, calc(var(--tall) * .4));
    }
    .public-section.taste-steps > .taste-figure[data-doodle] {grid-column: 1; grid-row: 1 / -1; justify-self: start; align-self: start; width: var(--path); margin: 0;}
    .public-section.taste-steps > :is(.exterior-heading, .public-cards) {position: relative; z-index: 3;}
    .public-section.taste-steps > .exterior-heading {grid-column: 2; grid-row: 1; margin: 48px 0 0;}
    .public-section.taste-steps > .public-cards {grid-column: 2; grid-row: 2 / 5; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: center; margin: 0; padding: 0;}
    .public-section.taste-steps > .public-cards > .card {display: block; padding: 14px 0; border: 0; margin: 0; max-width: 34em;}
  }
}
/* Tablets: the steps' words run taller than the rows of the drawing, so the drawing is a
   little larger and the heading sits closer to the card above (32px), keeping the road
   and the three steps level with each other. */
@media (min-width: 768px) and (max-width: 1023px) {
  #app .public-shell:has(.public-hero) .public-section.taste-steps {--path: 50cqw; grid-template-columns: calc(var(--path) + 28px) minmax(0, 1fr);}
  #app .public-shell:has(.public-hero) .public-section.taste-steps > .exterior-heading {margin-top: 32px;}
}

/* ---- Tablet and phone: one column, each drawing on its own edge ------------ */
@media (max-width: 1023px) {
  #app .public-shell:has(.public-hero) {
    /* minmax(0, …): a drawing wider than the column never widens the text beside it. */
    .public-hero,.public-section.taste-benefits,.public-section.taste-workspace > .card {grid-template-columns: minmax(0, 1fr);}
    /* The key and the workspace drawing are cut from the top: the key just above its
       ring (y 204 of 1000), the workspace just above the phone (y 330 of 1000). */
    :is(.taste-benefits, .taste-workspace .card) > .taste-figure[data-doodle] {overflow: hidden;}
    :is(.taste-benefits, .taste-workspace .card) > .taste-figure[data-doodle] img {height: 100%; object-fit: cover; object-position: 50% 100%;}
    .taste-benefits > .taste-figure[data-doodle] {aspect-ratio: 1000 / 796; max-width: none;}
    .taste-workspace .card > .taste-figure[data-doodle] {aspect-ratio: 1000 / 670; max-width: none;}
    /* What is left of each chain above its ring is cut away: a narrow notch in the
       picture over the chain only (workspace lantern at x 79.5%, ring from y 430 of 1000;
       hero lantern at x 39.6%, ring from y 195 of 885, so the notch stops at 21.9% and the
       ring stays whole). Each notch is a little wider than the chain, so no antialiased
       edge of a link shows at 1x. */
    .taste-workspace .card > .taste-figure[data-doodle] img {clip-path: polygon(0 0, 77.5% 0, 77.5% 14.4%, 81.5% 14.4%, 81.5% 0, 100% 0, 100% 100%, 0 100%);}
    .public-hero > .taste-figure[data-doodle] img {clip-path: polygon(0 0, 38% 0, 38% 21.9%, 41.2% 21.9%, 41.2% 0, 100% 0, 100% 100%, 0 100%);}
  }
}
/* The hero drawing stays inside the column: all three people whole, only the cushions'
   bottom edge crossing the top of the first card. */
@media (min-width: 768px) and (max-width: 1023px) {
  #app .public-shell:has(.public-hero) {
    .public-hero > .taste-figure[data-doodle] {justify-self: end; width: 88cqw; margin: 8px 0 -2.95cqw 0;}
    /* Beside the statements, at the foot of the card: the envelope's lowest corner keeps
       32px of card below it (the picture's last 4.5% of its width is empty sheet). The
       key hangs free, since the hero's cushions cross this card's top edge above it. */
    .taste-benefits > .taste-figure[data-doodle] {grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: end; width: 42cqw; margin: 0 -40px calc(-32px - 1.9cqw) 0;}
    /* The phone on its table rises beside the button, over empty card only, and stands
       on the card's bottom edge. */
    .taste-workspace .card > .taste-figure[data-doodle] {justify-self: end; width: 56cqw; margin: -64px -48px -48px 0;}
  }
}
@media (max-width: 767px) {
  #app .public-shell:has(.public-hero) {
    .public-hero > .taste-figure[data-doodle] {justify-self: start; width: 100cqw; margin: 4px 0 -3.37cqw 0;}
    /* The envelope and key across the card's whole width, the envelope's lowest corner
       28px above the card's bottom edge. */
    .taste-benefits > .taste-figure[data-doodle] {justify-self: center; width: 100cqw; margin: 24px -20px calc(-12px - 4.5cqw);}
    /* One column on the phone: the road comes out of the card above at its bottom edge
       (the section's 40px top padding is taken back) and winds down to the masjid, then
       the heading and the three steps follow. */
    .public-section.taste-steps {grid-template-columns: minmax(0, 1fr); gap: 24px;}
    .public-section.taste-steps > .public-cards > .card {padding: 0;}
    .taste-steps > .taste-figure[data-doodle] {grid-row: 1; justify-self: center; width: 88cqw; margin: -40px 0 16px;}
    /* The phone, tea and lantern across the card's whole width, the legs on its bottom edge. */
    .taste-workspace .card > .taste-figure[data-doodle] {justify-self: center; width: 100cqw; margin: 24px -24px -24px;}
  }
}

/* ---- Reading pages: one drawing beside each title ----------------------------------
   production-guard.js adds span.taste-page-doodle (aria-hidden) to the title column: the
   path to the masjid on How We Work, a small spot drawing (key, envelope, tea, lantern)
   on the others. The spots are drawn small on a 400 × 400 sheet, so they are pulled
   left by their margin to bring the ink onto the title's edge. */
#app .public-shell:has(.public-copy) .taste-page-doodle {display: block; pointer-events: none;}
#app .public-shell:has(.public-copy) .taste-page-doodle img {display: block; width: 100%; height: auto;}
#app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=spot] {width: 200px; margin: 0 0 0 -16px;}
/* The road from the paper and pen down to the masjid (How We Work). The drawing is made
   for 470px; below about 300px its lines thin to a hairline, so it stays at least that wide
   here, and beside the title on tablets and phones only its end is shown: the masjid and
   its minaret on their ground line (x 536–936, y 628–1097 of 974 × 1300), at the scale
   of a spot. */
#app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=path] {width: min(360px, 84%); margin: 12px 0 0;}
#app .public-shell:has(.public-copy) .taste-visit .taste-page-doodle[data-shape=spot] {margin: 8px 0 0 -4px;}
@media (max-width: 1023px) {
  #app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=spot] {width: 150px; margin: 0 -20px 0 0;}
  #app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=path] {width: 160px; margin: 0; aspect-ratio: 400 / 469; overflow: hidden;}
  #app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=path] img {width: 243.5%; max-width: none; margin: -157% 0 0 -134%;}
  #app .public-shell:has(.public-copy) .taste-visit .taste-page-doodle[data-shape=spot] {margin: -16px -8px 0 0;}
}
@media (max-width: 767px) {
  #app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=spot] {width: 112px; margin-right: -16px;}
  #app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=path] {width: 128px;}
  /* The key and the lantern are narrow: only the middle 40% of their sheet (x 120–280 of
     400) is shown, so they can be drawn larger without crowding the title beside them
     ("Accessibility" stays one word at 320px). */
  #app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=spot]:has(> img:is([src*="spot-key"], [src*="spot-lantern"])) {width: 56px; aspect-ratio: 160 / 400; overflow: hidden; margin-right: 0;}
  #app .public-shell:has(.public-copy) .taste-page-doodle[data-shape=spot]:has(> img:is([src*="spot-key"], [src*="spot-lantern"])) img {width: 250%; max-width: none; margin-left: -75%;}
}

/* "Who speaks to whom?" (How We Work): production-light.css lays a green-tint rug under
   the chosen person. The line drawing's people are unfilled, so the rug sits lower than
   their laps (y 374–437 of 520, under the cushions' front edge at 422) and only shows
   round the cushion or under the table, never through a figure; it stops above the
   buttons that rise into the sheet's empty foot. */
#app#app .public-shell:has(.public-copy) .taste-speaks-figure::before {bottom: 16%; height: 12%; width: 32%;}
#app#app .public-shell:has(.public-copy) .taste-speaks[data-chosen=administrator] .taste-speaks-figure::before {width: 30%;}
#app#app .public-shell:has(.public-copy) .taste-speaks[data-chosen=spouse] .taste-speaks-figure::before {left: 80.5%; width: 40%;}

/* High-contrast themes may paint the page dark; the chocolate ink keeps its light bone
   ground there. */
@media (forced-colors: active) {
  #app .public-shell:has(.public-hero) .taste-figure[data-doodle] {forced-color-adjust: none; background: #F4F3F0; border-radius: 16px;}
  #app .public-shell .taste-speaks-figure {forced-color-adjust: none; background: #F4F3F0; border-radius: 16px;}
  #app .public-shell .taste-page-doodle {display: none;}
}