/* L’Anatomie du Parfum — the app's own layout. Every part on a page is a component of the design system
   (components.css and tokens.css, copied in unchanged from assets/brand/); this file only places the parts.
   Tokens only, and spacing on the tokens' steps: tests/test_app.py checks it with the design system's own checks. */

html,body{margin:0;background:var(--adp-paper)}
.app-root{min-height:100vh;min-height:100dvh}

/* ============================================================ the page column
   One column for every page: the running head, the page and its foot share two edges, so the name and its bottle, the
   sections and the header read as one printed page, centred, with margins that grow with the window. The text block is
   1040 pixels; below 760 pixels the column is the screen, inside the gutters the parts used before. */
.app-page{width:100%;max-width:calc(1040px + 2 * var(--adp-space-6));margin-right:auto;margin-left:auto;padding-right:var(--adp-space-6);padding-left:var(--adp-space-6)}
@container (max-width:760px){.app-page{padding-right:var(--adp-space-5);padding-left:var(--adp-space-5)}}
@container (max-width:560px){.app-page{padding-right:var(--adp-space-4);padding-left:var(--adp-space-4)}}
/* the column owns the side edges; each part keeps its own top and bottom */
.app-page .adp-head,.app-page .adp-band,.app-page .adp-scent{padding-right:0;padding-left:0}
.app-page .adp-book-verso{padding-left:0}
.app-page .adp-book-recto{padding-right:0}
@container (max-width:680px){.app-page .adp-book-verso,.app-page .adp-book-recto{padding-right:0;padding-left:0}}
.app-body{padding-top:var(--adp-space-6);padding-bottom:var(--adp-space-6)}
/* on a computer, more air: under the running head, and between a page's major groups */
@container (min-width:761px){
  .app-page .adp-band,.app-body{padding-top:var(--adp-space-7)}
  .app-sections>.adp-section+.adp-section{padding-top:var(--adp-space-7)}
}

/* the header holds the search box's suggestions under it (CP-2); app.js places them under the box */
.adp-head{position:relative;z-index:5}
.app-suggest{position:absolute;z-index:6;max-height:70vh;overflow-y:auto;background:var(--adp-paper)}
.app-suggest[hidden]{display:none}
.app-suggest .adp-suggest{min-width:0}
/* a phone zooms into any text box under 16px when it is tapped, and the zoom crops the suggestions; 16px keeps it still */
@media (pointer:coarse){.adp-search input{font-size:max(16px,var(--adp-size-control))}}

/* two layers outside the page: the ink card floats over it (CP-5), and on a phone its sheet rises from the screen's foot */
.app-layer.adp-page{container-type:normal;background:transparent}
.app-float-layer{position:absolute;top:0;left:0;width:100%;height:0;z-index:30}
.app-sheet-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none}
.app-sheet-layer .adp-sheet{pointer-events:auto}

/* the band under the version tabs (PT-2): what the house says you'll smell and how long it lasts, one block under one
   source. The bottle keeps one height on a computer, so opening the rest of the description never resizes it. */
.app-says{display:grid;gap:var(--adp-space-2)}
.app-says-line{font:400 var(--adp-size-reading-wide)/1.45 var(--adp-font-reading)}
.app-says .adp-ruler{margin-top:0}
.app-says-more{color:var(--adp-ink-quiet);font:400 var(--adp-size-small)/1.45 var(--adp-font-reading)}
.app-says-more summary{width:max-content;color:var(--adp-accent);cursor:pointer}
.app-says-more summary+p,.app-says-more p+p{margin-top:var(--adp-space-2)}
@container (max-width:620px){.app-says-line{font-size:var(--adp-size-reading)}}
@container (min-width:621px){.app-page .adp-band-bottle{align-self:start;height:calc(var(--adp-space-8) * 5)}}

/* how to say an ingredient's name, under the name on its page: a respelling, the stressed syllable in capitals */
.app-say{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--adp-space-1) var(--adp-space-3);margin:calc(-1 * var(--adp-space-2)) 0 var(--adp-space-4)}
.app-say-words{color:var(--adp-ink);font:400 var(--adp-size-reading)/1.4 var(--adp-font-controls);letter-spacing:.02em}

/* a page's sections under its band */
.app-sections{padding-top:0;padding-bottom:var(--adp-space-6)}
.app-intro .adp-band-name{margin:var(--adp-space-2) 0 var(--adp-space-3)}
.app-after{margin-top:var(--adp-space-3)}
.app-facts-first{margin-top:0}
.app-check{margin-bottom:var(--adp-space-4)}
.app-mark-gap{margin-left:var(--adp-space-2)}

/* the collection, house by house */
.app-houses{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--adp-space-6) var(--adp-space-7)}
.app-house>.adp-label{margin-bottom:var(--adp-space-2)}
.app-card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin-top:var(--adp-space-5)}

/* an ingredient page: the plate stays in view beside its long page of facts, on screens wide enough for two pages */
@container (min-width:681px){.adp-book-verso .adp-plate-fig{position:sticky;top:var(--adp-space-5)}}
/* no plate yet: the ingredient's two pieces share the plate's place, one above the other */
.app-pair{display:grid;grid-template-rows:1fr 1fr;gap:var(--adp-space-3)}
.app-pair-piece{height:100%}

/* a chemical name longer than its column ("tetramethyl acetyloctahydronaphthalenes") breaks inside itself rather than
   push the page sideways */
.adp-facts dd,.adp-book-name{overflow-wrap:anywhere}

/* a chip whose words are longer than the phone's width wraps inside its outline instead of running off the page;
   shorter chips stay on one line as the component draws them */
.adp-chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}

/* an ingredient page's lists */
.app-sources{display:grid;gap:var(--adp-space-1)}
.app-more-btn{margin-top:var(--adp-space-3)}
.app-more[hidden]{display:none}

.app-foot{padding-top:var(--adp-space-6);padding-bottom:var(--adp-space-5);border-top:var(--adp-rule)}

/* the scent picture (LY-4): the whole board on a computer; on a phone or a tablet each stage is its own strip under its
   name. Below 900 px the board's names would fall under 12 px, so the strips take over there. The set a screen hides
   never loads: its pictures wait for view (loading="lazy"), and a hidden one never comes into view. */
.app-strips{display:none}
.app-strip-head{grid-template-columns:minmax(0,1fr);margin-top:var(--adp-space-4);padding:0}
.app-strip-head:first-child{margin-top:0}
@container (max-width:900px){.app-board{display:none}.app-strips{display:block}}