/* D10, ruling KA, for N45. Load after sidebars.css.
   Tokens only: no hex, no important flags. Class names are new (sigsearch-*, sigad--house) or
   existing (sigrail, sigband, sigad, sigad-mark). */

/* 1. Sidebar search: its own theme component, printed by gpcf_rail() BEFORE the banner zone.
   It is never a widget of the banner zone, so no ad caption can attach to it. */
.sigsearch{ margin:0; }
.sigsearch-form{ position:relative; display:block; margin:0; }
.sigsearch-field{
  box-sizing:border-box;
  display:block;
  width:100%;
  height:var(--tap-comfortable);
  margin:0;
  padding:0 calc(var(--tap-comfortable) + var(--space-1)) 0 var(--space-9);
  border:1px solid var(--os-line);
  border-radius:var(--radius-pill);
  background:var(--os-card);
  color:var(--os-text);
  font-family:var(--font-body);
  font-size:var(--m-size-input);      /* 16 px on every screen: stops the iOS zoom */
  line-height:1.2;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease);
}
.sigsearch-field::placeholder{ color:var(--os-muted); opacity:1; }
.sigsearch-field::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.sigsearch-field:hover{ border-color:var(--os-accent); }
.sigsearch-field:focus{
  outline:none;
  border-color:var(--os-link);
  box-shadow:0 0 0 2px var(--os-link);
}
.sigsearch-btn{
  position:absolute;
  top:var(--space-1);
  right:var(--space-1);
  display:flex;
  align-items:center;
  justify-content:center;
  width:calc(var(--tap-comfortable) - 2 * var(--space-1));
  height:calc(var(--tap-comfortable) - 2 * var(--space-1));
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--os-link);          /* secondary button: dark teal. The golden CTA stays unique per view. */
  color:var(--on-dark);
  cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease);
}
.sigsearch-btn::after{ content:""; position:absolute; inset:calc(-1 * var(--space-1)); }   /* the tap area is the whole 48 px of the pill's end */
.sigsearch-btn:hover{ background:var(--os-link-hover); }
.sigsearch-btn:focus-visible{ outline:3px solid var(--os-accent); outline-offset:2px; }
.sigsearch-btn svg{ display:block; width:20px; height:20px; }

/* 2. Ad slot: no "Advertisement" above the banner. A quiet caption UNDER each banner,
   rounded corners on the banner, house ads carry no caption. */
.sigrail > .sigad{ gap:var(--space-3); }
.sigrail > .sigad .sigad-mark{ display:block; order:2; }
.sigrail > .sigad.sigad--house .sigad-mark{ display:none; }
.sigrail .sigad.widget_media_image img,
.sigband .sigad.widget_media_image img{ border-radius:var(--radius-card); }
.sigad a{ border-radius:var(--radius-card); }
.sigad a:focus-visible{ outline:3px solid var(--os-link); outline-offset:3px; }
.sigad--house a img{ transition:box-shadow var(--duration-base) var(--ease); }
.sigad--house a:hover img{ box-shadow:var(--shadow-floating); }

/* Same treatment for the blog and article bands (optional): caption under, not in the top strip. */
.sigband{ padding-top:0; }
.sigband > .sigad .sigad-mark,
.sigband > .sigad:first-child .sigad-mark{ display:block; position:static; order:2; }
.sigband > .sigad.sigad--house .sigad-mark{ display:none; }

/* 3. Phones (768 px and below, the theme's stacking convention): the search follows the banner width. */
@media (max-width:768px){
  .sigsearch{ width:100%; max-width:var(--banner-width); margin-left:auto; margin-right:auto; }
}