/* =========================================================================
   DTA Collectibles — advanced search

   Implements search-form.html and search-results.html. Loaded on the page using
   page-advanced-search.php, on top of archive.css.

   Mockup class -> theme class, where they differ:
     .searchform  -> .dta-search__layout      form + rail, two columns
     form         -> .dta-search__form
     .rail        -> .dta-search__rail .rail
     .query       -> .dta-intro .dta-search__intro--query
     .pivot       -> .dta-search__pivot
     .toolbar     -> .dta-toolbar .dta-search__toolbar  (archive.css owns the
                                                         shared half)
     .facets      -> .dta-search__chips .chips          see below
     .products    -> .products                          archive.css, see §6
     .dupes       -> not drawn; see PORTING.md

   THE FACET RAIL IS NOT DRAWN, AND ITS JOB IS. search-results.html has a left
   rail of facets — department, year, condition, price, publisher — because in
   that drawing the form lived on a different page and the results page needed
   its own controls. Here they are one URL: the form is on this page, populated
   from the query string, one <details> below the results. A second set of
   controls over the same fields is two things that can disagree, and the mockup
   admits in its own note that its rail could carry no counts.

   What the rail did that a form does not is show what is applied and let one
   thing come off. That is .dta-search__chips, and each chip is the current URL
   minus one parameter, so it cannot claim a filter that is not applied.

   NOT IMPLEMENTED: .dupes, the "several of these are the same issue" note. It
   is true and useful on the mockup's TV Guide example and this page has no way
   to know it — telling duplicates apart means comparing composed titles across
   a result set, which is the run page's job and it does it properly.
   ====================================================================== */


/* =========================================================================
   1. THE COLUMN

   Nothing here. inc/advanced-search.php removes oceanwp_display_sidebar() from
   both hooks so the sidebar element is never printed, and the body keeps its
   `content-left-sidebar` class, so OceanWP goes on narrowing #primary for a
   sidebar that is not there. The other half of that fix is in archive.css,
   whose #content-wrap and #primary rules now name this page's body class
   alongside the archive's. Same for the border-box reset and the type floor,
   which this page picks up from the `dta-archive` class on its wrapper.

   Recorded rather than deleted, because "where is the width fix for this page"
   is the question this section exists to answer.
   ====================================================================== */


/* =========================================================================
   2. THE HEADING AND THE CHIPS

   .dta-intro comes from archive.css. What is added here is the query state:
   the phrase that was searched for as the h1, and the applied filters under it.
   ====================================================================== */

.dta-search__intro--query h1 em {
  font-style: normal;
  color: var(--c-accent);
}

.dta-search__chips {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
}

.dta-search__chips li {
  margin: 0;
  padding: 0;
}

/* .chip and .chip i come from archive.css. The × is a hover affordance there
   and a real action here, so it gets the accent on hover rather than staying
   the muted count colour. */
.dta-search__chips .chip:hover i {
  color: var(--c-accent);
}

.dta-search__chips .chip--clear {
  border-style: dashed;
  color: var(--c-text);
}


/* =========================================================================
   3. THE FORM

   One column of grouped fieldsets, from search-form.html. Every control is a
   real labelled field at a 44px tap target — the mockup's number, kept, because
   this is the page people arrive at on a phone knowing what they want.

   THE ROWS ARE A TWELVE-COLUMN GRID, AND WERE auto-fit UNTIL SEPT 10.

   `repeat(auto-fit, minmax(190px, 1fr))` decides the track count from the
   available width and then COLLAPSES the tracks nothing lands in. On a 1,077px
   form that is five tracks, and the result was a different row shape in every
   fieldset, none of them chosen. Measured on staging at a 1600px viewport:

     What you are looking for   5 tracks of 203px — Keywords spans all five,
                                which stops the empty ones collapsing, so
                                Department, Series and Issue filled three of
                                five and 406px sat empty
     When it was published      3 tracks of 348px
     Who published it           ONE track of 1,077px — a publisher select the
                                full width of the page
     Condition                  2 tracks of 531px
     Price                      3 tracks of 348px

   So the fieldsets were full width and their contents were not, and the amount
   of width a field got depended on how many other fields happened to be in its
   fieldset. Twelve fixed columns with a declared span per field makes the row
   shape a decision instead: every row below fills 12/12, measured.

   The spans are named for the fraction they take rather than for the field
   they are on, because the same three shapes cover the whole form: --wide
   (12), --half (6), --quarter (3). An unclassed .field spans 12 rather than
   landing in whatever track is free, which is the failure mode above.
   ====================================================================== */

.dta-search__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: var(--s-6);
  align-items: start;
}

/* The form is the query container for the row shapes below. The thing that
   decides whether three fields fit across a row is THE FORM'S width, not the
   viewport's: this page puts a 300px rail beside the form, so at a 1024px
   viewport the form is 598px while the viewport is still nominally desktop. A
   media query asked the wrong element and would have kept three-across rows in
   a 598px form, or dropped them in a 1,077px one. */
.dta-search__form {
  container-type: inline-size;
  container-name: dtaform;
}

/* THE RULE IS STRONG ON EVERY FIELDSET NOW, not just the first.

   It was --rule at 1px #ececec, the same line the cards and tables use, under
   a legend one step above the field labels beneath it. Six groups divided by
   the lightest line in the system is a form that reads as one long list, which
   is the "the headings do not structure the page" complaint. --rule-strong and
   a bold legend are both a step up and neither is a size change.

   `fieldset:first-of-type` is gone from here because it said --rule-strong and
   that is now the default. Section 8 still softens the first one INSIDE the
   refine panel, and still means what it meant: the first rule there sits
   directly under the summary that already divides the page. */
.dta-search__form fieldset {
  border: 0;
  border-top: var(--rule-strong);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) 0 0;
}

.dta-search__form legend {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  /* --w-bold, not --w-semibold: 600 against the labels' 500 was one weight
     step and two pixels, which is not a heading. The SIZE is deliberately
     unchanged — the brief is to see whether the tightening carries the
     hierarchy before any type grows. */
  font-weight: var(--w-bold);
  color: var(--c-text-strong);
  padding: 0;
  margin: 0;
}

.dta-search__form .fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Row gap deliberately tighter than the column gap: fields in a row are
     separate questions and want air between them, fields stacked down the page
     are already separated by their own labels. */
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
}

.dta-search__form .field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  /* The default is the whole row. A field with no span modifier is a field
     somebody added without deciding, and a full-width control is the answer
     that is never wrong — unlike auto-placement, which used to drop it into
     whichever track was free. */
  grid-column: span 12;
}

.dta-search__form .field--half    { grid-column: span 6; }
.dta-search__form .field--quarter { grid-column: span 3; }

/* CHROME DRAWS A DROPDOWN ARROW ON <input list> AND CLICKING IT DOES NOTHING.
   It reads as a control and is not one; the help text already says to type.

   Scoped to input[list] rather than to every input in the form: the same
   pseudo-element is the picker button on date and time inputs, and this form
   has none today. A blanket rule would silently disarm the first one somebody
   adds.

   NOT VERIFIED HERE, AND THE TWO OBVIOUS CHECKS BOTH FAILED TO BE CHECKS.
   getComputedStyle(el, '::-webkit-calendar-picker-indicator') returns the
   input's own box, so it reads identically with and without this rule. And
   CSSOM insertRule accepts the selector — but it also accepts
   `::-webkit-not-a-real-thing`, so acceptance says nothing either. This rule
   rests on the arrow having been seen in Chrome, not on a measurement taken
   here; it is one glance to confirm after deploy. */
.dta-search__form input[list]::-webkit-calendar-picker-indicator {
  display: none;
}

/* The publisher field's <datalist> is a child of .field--wide, which is a grid.
   The UA sheet already hides it — measured on staging — but an inherited
   `datalist { display: block }` would put a phantom row between the control and
   its help text, and the element carries 250 options. Stated, not assumed. */
.dta-search__form datalist {
  display: none;
}

/* THE WIDE FIELD PUTS ITS HELP BESIDE THE CONTROL, NOT UNDER IT.

   Keywords, Publisher or studio and SKU each own a whole row, and each has a
   line of help. Under the control that help was a third line in the stack and
   the row was 1,077px wide with a sentence sitting at 46ch of it. Beside the
   control it costs no height at all, and the sentence gets 442px instead of
   356 — which is the same change asked for twice, once as "close the vertical
   gaps" and once as "the help is the hardest text on the page to read".

   7fr/5fr rather than halves: the control is the thing being used and should
   look like the longer of the two.

   The label spans both columns because it labels the row, not the input alone.
   The help is centred against the control so a one-line note sits on the
   control's optical centre rather than at the top of a 44px box. */
.dta-search__form .field--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 5fr;
  column-gap: var(--s-4);
  row-gap: 2px;
  align-items: start;
}

.dta-search__form .field--wide > label {
  grid-column: 1 / -1;
  grid-row: 1;
}

.dta-search__form .field--wide > input,
.dta-search__form .field--wide > select {
  grid-column: 1;
  grid-row: 2;
}

.dta-search__form .field--wide > .help {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  margin-top: 0;
  /* The measure cap below is for a sentence under a narrow field. This one has
     its own column and should use it. */
  max-width: none;
}

.dta-search__form label,
.dta-search__form .legendish {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  color: var(--c-text-strong);
  font-weight: var(--w-medium);
}

/* THE HELP IS DARKENED, NOT ENLARGED.

   It was --c-text (#666) at --t-xs in Archivo Narrow, under a label at --t-sm
   in the same family at --w-medium in --c-text-strong — smaller, lighter and
   greyer than the label above it, which made the sentence explaining how the
   catalogue is filed the least readable text on the page. That sentence is the
   one a customer actually needs.

   --c-text-strong takes it from 5.7:1 to 12.6:1 on white. It stays subordinate
   to its label on size and weight, which is the whole of the job the grey was
   doing. The SIZE is untouched, deliberately — see the legend above.

   46ch to 60ch: at 46ch the two long notes broke to three lines inside a
   203px track. The track is 530px now and the cap was the thing still
   wrapping them. */
.dta-search__form .help {
  font-family: var(--f-narrow);
  font-size: var(--t-xs);
  line-height: var(--lh-snug);
  color: var(--c-text-strong);
  max-width: 60ch;
  margin-top: 2px;
}

/* THE 44px IS NOT REACHING THE TEXT INPUTS, AND IT IS NOT FIXED HERE.
   Measured on a freshly loaded staging page, Sept 11: every <select> in this
   form is 44px and every <input> is 40px with 6px padding, so the tap target
   the comment at the top of this section describes is met by half the form.
   Something in oceanwp/assets/css/style.min.css supplies it.

   NOT FIXED IN THIS PASS because it could not be measured honestly. Disabling
   a stylesheet and re-enabling it leaves it not re-applied in this browser, so
   every reading taken after a bisect showed 44px and every reading on a clean
   load showed 40px — the method that found the number-input max-width below
   silently corrupts anything measured after it. A fix needs one fresh page
   load per candidate rule. Left as a known defect rather than a rule nobody
   watched win.

   It is also why the publisher control moving from <select> to <input> takes
   that field from 44px to 40px. That is this defect, not a new one: the field
   now sits with the other text inputs instead of with the selects. */
.dta-search__form input,
.dta-search__form select {
  font-family: var(--f-narrow);
  font-size: var(--t-base);
  color: var(--c-text-strong);
  background: var(--c-surface);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  min-height: 44px;
  width: 100%;
}

/* OCEANWP CAPS NUMBER INPUTS AT 50px AND THE `width: 100%` ABOVE DOES NOT
   BEAT IT, because it is a max-width and max-width wins over width whatever
   the specificity.

   This is what made Year from and Year to look like an error: the two fields
   were 348px tracks with 50px boxes in them, so the boxes sat 257px apart with
   their own labels stranded above nothing. Same for Minimum and Maximum under
   Price. Found by disabling stylesheets one at a time and re-reading the
   computed value — oceanwp/assets/css/style.min.css — because enumerating
   cssRules on that sheet returns 15 rules and cannot be trusted to say the
   rule is not there.

   `max-width: none` and no !important: measured on the live page, this wins
   as written. */
.dta-search__form input[type="number"] {
  max-width: none;
}

.dta-search__form input:focus-visible,
.dta-search__form select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-color: var(--c-border-focus);
}

/* The condition bands. A grid rather than a flex row so the six boxes line up
   in columns however long their labels are — "Good and better" is twice the
   width of "Mint".

   170px to 150px, which is the difference between five columns and six on a
   1,077px form: six bands in five columns wrapped one band onto a second row
   and cost 44px for a single checkbox. Measured at 150px: one row of six at
   desktop, three rows on a 375px phone (it was six). auto-fit is right HERE,
   unlike on .fields above — these are six identical boxes with no spans to
   decide, and the only question is how many fit. */
.dta-search__form .checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 var(--s-4);
  margin-top: var(--s-2);
}

.dta-search__form .check {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  /* Kept: this is the tap target, not the rhythm. The gap above is what was
     making six of these as tall as a paragraph. */
  min-height: 44px;
}

/* The checkbox keeps its own size against the width:100% rule above, which is
   written for text inputs and would otherwise stretch it across the label. */
.dta-search__form .check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  flex: none;
}

.dta-search__form .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  border-top: var(--rule-strong);
  padding-top: var(--s-3);
  margin-top: var(--s-2);
}

.dta-search .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  color: var(--c-text-invert);
  font-family: var(--f-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-base);
  border: 1px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-6);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
}

.dta-search .btn:hover,
.dta-search .btn:focus-visible {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
  color: var(--c-text-invert);
}

.dta-search .btn.ghost {
  background: var(--c-surface);
  color: var(--c-text-strong);
  border: var(--rule);
}

.dta-search .btn.ghost:hover,
.dta-search .btn.ghost:focus-visible {
  background: var(--c-surface);
  border-color: var(--c-accent);
  color: var(--c-accent);
}


/* =========================================================================
   4. THE RAIL
   ====================================================================== */

.dta-search__rail {
  font-size: var(--t-sm);
}

.dta-search__rail section {
  border-top: var(--rule-strong);
  padding-top: var(--s-3);
  margin-bottom: var(--s-5);
}

.dta-search__rail h2 {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  margin: 0 0 var(--s-3);
}

.dta-search__rail p {
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}

.dta-search__rail ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-narrow);
}

.dta-search__rail li {
  padding: var(--s-1) 0;
  border-bottom: 1px dotted var(--c-border);
}

.dta-search__rail li:last-child {
  border-bottom: 0;
}


/* =========================================================================
   5. RESULTS: PIVOT, TOOLBAR, EMPTY STATE
   ====================================================================== */

.dta-search__pivot {
  border: var(--rule);
  border-left: 3px solid var(--c-accent);
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: baseline;
}

.dta-search__pivot p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  max-width: 60ch;
}

.dta-search__pivot b {
  color: var(--c-text-strong);
  font-weight: var(--w-semibold);
  font-feature-settings: var(--num-tabular);
}

.dta-search__pivot a {
  margin-left: auto;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  white-space: nowrap;
}

/* archive.css lays the toolbar's CHILD out as the flex row, because on an
   archive the toolbar holds one wrapper div that OceanWP opens. Here it holds
   the count and the sort form directly, so the row is declared on the toolbar
   itself. */
.dta-search__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
}

/* The count's own type is archive.css's, and now reaches this page with the
   rest of that file's `:is()` qualifier. Only the row is declared here. */

.dta-search__sort {
  margin-left: auto;
}

.dta-search__sort select {
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
  border: var(--rule);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface);
  color: var(--c-text-strong);
  min-height: 44px;
}

.dta-search__none {
  border-top: var(--rule-strong);
  padding-top: var(--s-5);
}

.dta-search__none h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  margin: 0 0 var(--s-3);
}

.dta-search__none p {
  max-width: 66ch;
  margin: 0 0 var(--s-4);
}

.dta-search__loosen {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--f-narrow);
  font-size: var(--t-sm);
}

.dta-search__loosen li {
  padding: var(--s-2) 0;
  border-bottom: 1px dotted var(--c-border);
}

.dta-search__loosen li:last-child {
  border-bottom: 0;
}


/* =========================================================================
   6. THE CARDS

   Nothing here either, and this is the section worth reading before adding
   anything to it.

   A second copy of the card was written here first, because every selector in
   archive.css section 6 was qualified `body.tax-product_cat` — not for scoping
   but to out-specify OceanWP's `.woocommerce ul.products li.product` — and this
   page is not a product_cat archive, so none of it matched.

   That copy is gone. archive.css now qualifies with
   `:is(body.tax-product_cat, body.dta-search-page)`, which keeps the
   specificity exactly (both arguments are one class on `body`) and admits this
   page, and the wrapper in page-advanced-search.php carries `dta-archive` so
   the rest of the chain matches. One design, one definition.

   So: a card change goes in archive.css. If a rule ever seems to want to live
   here, the question to ask first is whether it is a card rule at all.
   ====================================================================== */


/* =========================================================================
   6b. NEW ARRIVALS

   The same page shape as a result list — intro, chips, cards, pager — so almost
   everything it needs is already above. What is added is the ON state, which
   the search's chips do not have: there a chip is "remove this filter" and it is
   always removable, here a chip is "this is the view you are on" and one of
   them is always current.
   ====================================================================== */

.dta-arrivals__filter {
  margin-bottom: var(--s-5);
}

.dta-arrivals__filter .chip--on {
  background: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-text-invert);
}

.dta-arrivals__filter .chip--on:hover {
  color: var(--c-text-invert);
  border-color: var(--c-dark);
}

.dta-arrivals__none {
  border-top: var(--rule);
  padding-top: var(--s-4);
  max-width: 66ch;
}


/* =========================================================================
   7. THE PAGER

   .dta-pager in archive.css styles the links and the rule above them, and lays
   out the <ul> that WooCommerce's pagination emits. paginate_links() returns
   plain links with no list, so the row itself is laid out here.
   ====================================================================== */

.dta-search__pager {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}


/* =========================================================================
   8. THE FORM ON A RESULT PAGE

   Closed, because the results are the answer and the form is the way to adjust
   it. <details> rather than JavaScript: no script, keyboard reachable, and open
   by default in browsers that do not support it — which fails to the safe side,
   a visible form rather than an invisible one.
   ====================================================================== */

.dta-search__refine {
  margin-top: var(--s-8);
  border-top: var(--rule-strong);
  padding-top: var(--s-4);
}

.dta-search__refine > summary {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--c-text-strong);
  cursor: pointer;
  padding: var(--s-2) 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.dta-search__refine > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.dta-search__panel {
  padding-top: var(--s-4);
  max-width: 760px;
}

/* The first fieldset's rule reads as a second page division directly under the
   summary it belongs to, so it is the light one here. Unchanged in effect and
   inverted in mechanism: every fieldset is --rule-strong now, so this softens
   the first rather than the other five being softer than it. */
.dta-search__panel .dta-search__form fieldset:first-of-type {
  border-top: var(--rule);
}


/* =========================================================================
   9. NARROW

   The form's rows answer to the FORM, in @container. Everything else on the
   page answers to the viewport, in @media, below. The split is not tidiness:
   the form is 598px wide at a 1024px viewport because a 300px rail is beside
   it, and 1,077px at 1600px. A viewport query on the rows would have been
   wrong at one end or the other, and the value it is wrong about — whether
   three fields fit across — is exactly the value this section exists to set.

   Two tiers, both measured:

     over 900px   the twelve-column scheme as declared: 3 / 6 / 3 rows
     560-900px    quarters and halves both become 6, so every row is a pair.
                  A 598px form at 1024 gets two 291px fields per row
     under 560px  halves take the row; wide fields put their help back under
                  the control. Quarters STAY at 6 — Year from and Year to are
                  a pair at 156px each on a 375px phone, and stacking them is
                  what made them look like two unrelated questions
   ====================================================================== */

@container dtaform (max-width: 900px) {
  .dta-search__form .field--quarter,
  .dta-search__form .field--half {
    grid-column: span 6;
  }
}

@container dtaform (max-width: 560px) {
  .dta-search__form .field--half {
    grid-column: span 12;
  }

  .dta-search__form .field--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .dta-search__form .field--wide > input,
  .dta-search__form .field--wide > select {
    grid-column: 1;
  }

  .dta-search__form .field--wide > .help {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin-top: 2px;
  }
}

@media (max-width: 900px) {
  .dta-search__layout {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  /* The rail is orientation rather than navigation, so below the form is where
     it belongs once they stack — a visitor who has read this far has already
     started filling the form in. */
  .dta-search__rail {
    order: 2;
  }
}

@media (max-width: 600px) {
  /* The card grid is archive.css's and already goes narrow on its own
     auto-fill; what wraps badly here is the toolbar, which has a sentence on
     one side and a select on the other. */
  .dta-search__toolbar .dta-count {
    margin-right: 0;
    flex: 1 1 100%;
  }

  .dta-search__sort {
    margin-left: 0;
  }
}