/*
 * Spotter Otter responsive cleanup layer.
 * This file intentionally contains presentation-only overrides so the existing
 * search, account, queue and alert logic can keep evolving independently.
 */

/* A little less vertical and card density on larger screens, too. */
.section{padding:56px 0}
.features{gap:12px;margin-top:22px}
.feature{padding:18px;border-radius:18px}
.dashshell{margin-top:22px}
.watchlist{gap:9px}
.watchcard{padding:14px}
.search-discovery{max-width:900px}

@media(max-width:980px){
  .hero{gap:24px}
  .section{padding:48px 0}
  .features{gap:10px}
  .dashshell{margin-top:20px}
}

@media(max-width:650px){
  html,body{overflow-x:hidden}
  .shell{width:calc(100% - 24px)}

  /* Compact sticky header without sacrificing the main actions. */
  .navin{height:60px;gap:8px}
  .brand{gap:8px;font-size:17px;letter-spacing:-.03em;min-width:0}
  .mark{width:38px;height:38px;border-radius:11px}
  .brandsmall{display:none}
  .navlinks{gap:6px;min-width:0}
  .navlinks .btn,#navCreate{padding:9px 11px;font-size:10.5px;white-space:nowrap}
  .theme-toggle{width:40px;min-width:40px;height:40px;padding:0;gap:0}
  #themeLabel{display:none}

  /* The form is the first thing mobile users see. Use one surface, not nested frames. */
  .hero{padding:10px 0 30px;gap:20px}
  .hero>.watchbox{width:100%}
  .watchbox{padding:0;background:transparent;border-radius:0;box-shadow:none}
  .watchbox:before{display:none}
  .watchinner{padding:15px;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 10px 30px rgba(25,54,37,.07)}
  .watchhead{margin-bottom:8px;gap:8px;align-items:center}
  .watchhead h2{font-size:21px;letter-spacing:-.03em}
  .ebaybadge{padding:6px 8px;font-size:9.5px;margin:0}
  #create .criteria-guidance{margin:0 0 10px;font-size:11px;line-height:1.4}
  #create .field{margin-bottom:9px}
  .field label{font-size:11px;margin-bottom:5px}
  .field label span{font-size:9.5px}
  .input,.select{min-height:44px;padding:10px 12px;border-radius:12px;font-size:16px}
  .row2,.row3{grid-template-columns:1fr;gap:0}
  .advanced-toggle{padding:10px 12px;margin:2px 0 10px;border-radius:12px}
  .advanced{padding-top:11px}
  .checkrow{padding:10px 11px;border-radius:11px}
  .help{font-size:10px;margin-top:4px}
  .formerror{margin-bottom:9px;padding:9px 10px}
  .submit{min-height:46px;padding:12px 15px}

  /* Examples remain available but do not wrap into several noisy rows. */
  .examples{margin-top:12px;overflow:hidden}
  .examples small{margin-bottom:6px}
  .chips{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:0 1px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chipbtn{flex:0 0 auto;padding:7px 9px;font-size:10px}

  /* Secondary hero copy is shorter and quieter on a phone. */
  .hero-copy{padding:0 2px}
  .eyebrow{padding:6px 9px;font-size:9.5px}
  .hero-copy h1{font-size:clamp(31px,10vw,39px);line-height:1.01;margin:10px 0 11px;letter-spacing:-.052em}
  .hero-copy>p{font-size:14.5px;line-height:1.5;margin:0}
  .hero-copy .trust{gap:7px 11px;margin-top:11px;font-size:10.5px;line-height:1.3}
  .hero-copy .check{width:15px;height:15px;font-size:9px}

  /* Reduce long empty stretches between content sections. */
  .section{padding:39px 0}
  h2.sectiontitle{font-size:clamp(29px,9vw,36px);line-height:1.04;margin:7px 0 10px}
  .lead{font-size:13.5px;line-height:1.55}
  .kicker{font-size:9.5px}
  .features{grid-template-columns:1fr;gap:8px;margin-top:18px}
  .feature{padding:14px 15px;border-radius:15px}
  .featureicon{width:32px;height:32px;border-radius:10px;font-size:15px}
  .feature h3{margin:10px 0 4px;font-size:14px}
  .feature p{font-size:11.5px;line-height:1.45}

  /* Dashboard: one clean outer card, compact stats, horizontally scrolling status row. */
  .dashshell{padding:0;margin-top:16px;background:transparent;border-radius:0;box-shadow:none}
  .dash{min-height:0;border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden}
  .dashtop{padding:14px 14px 12px;gap:8px;align-items:flex-start}
  .dashtop h3{font-size:21px;line-height:1.05}
  .dashtop p{font-size:10.5px;line-height:1.4;margin-top:4px}
  .statusbar{padding:9px 12px;gap:14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .statusbar::-webkit-scrollbar{display:none}
  .statusitem{flex:0 0 auto;font-size:10px}
  .dashbody{padding:12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:10px}
  .stat{padding:10px 11px;border-radius:13px;min-width:0}
  .stat strong{font-size:18px}
  .stat div{font-size:9.5px;white-space:normal}
  .toolbar{gap:7px;margin:9px 0 10px;width:100%}
  .toolbar .btn{min-height:38px;padding:9px 12px}
  .notice{padding:9px 10px;margin-bottom:9px;font-size:11px}

  /* Spotter cards show the information first and actions second. */
  .watchlist{gap:8px}
  .watchcard{padding:11px;border-radius:15px}
  .watchtop{grid-template-columns:38px minmax(0,1fr);gap:9px}
  .watchicon{width:38px;height:38px;border-radius:11px}
  .miniotter{width:29px;height:29px}
  .watchtitle{font-size:13.5px;line-height:1.25}
  .watchmeta{font-size:10.25px;line-height:1.42;margin-top:3px}
  .pill{font-size:8.75px;padding:4px 6px;margin:4px 3px 0 0}
  .watchactions{grid-column:1/-1;justify-content:flex-start;gap:5px;margin-top:3px}
  .watchactions .btn{flex:1 1 calc(50% - 5px);min-height:36px;padding:8px 9px;font-size:10.25px;white-space:nowrap}
  .resultline{margin:9px 0 0;padding:9px 10px;border-radius:10px;font-size:10.5px;line-height:1.4}
  .matches{margin:8px 0 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .matchcard{border-radius:11px}
  .matchbody{padding:7px}
  .matchtitle{font-size:10px;height:27px}
  .matchprice{font-size:12px;margin-top:4px}
  .matchsub{font-size:9px}
  .empty{padding:28px 15px;border-radius:15px;font-size:12px}

  /* Pagination/control rows should not feel like separate sections. */
  .spotter-list-controls{gap:7px;margin-block:8px}
  .spotter-pagination{gap:8px;margin:15px 0;font-size:11px}
  .spotter-pagination .btn{padding:8px 10px}

  .how{gap:11px;margin-top:18px}
  .step{padding-top:13px}
  .step h3{margin:10px 0 4px}
  .step p{font-size:11.5px;line-height:1.45}
  .legal{padding:12px 13px;margin-top:17px;font-size:11px;line-height:1.5}

  /* Popups behave like tidy mobile sheets instead of floating desktop windows. */
  .modalbg{align-items:flex-end;padding:0}
  .modal{width:100%;max-height:88dvh;border-radius:22px 22px 0 0}
  .modalhead{padding:15px 15px 12px}
  .modalhead h3{font-size:20px}
  .modalbody{padding:14px 15px 18px}
  .modalactions{gap:6px;margin-top:13px}

  .search-discovery{margin:16px 12px 0;padding:15px;border-radius:15px}
  .search-discovery h2{font-size:17px;line-height:1.2}
  .search-discovery p{font-size:11.5px;line-height:1.5}
  .search-discovery a{font-size:11.5px}
  .site-legal-links{padding-top:14px;font-size:10.5px}
  .footer{padding:20px 0 28px}
}

@media(max-width:420px){
  .shell{width:calc(100% - 20px)}
  .navin{height:56px}
  .mark{width:35px;height:35px}
  .brand{font-size:16px}
  #navCreate{padding:8px 9px;font-size:9.75px}
  .theme-toggle{width:36px;min-width:36px;height:36px}
  .watchinner{padding:13px}
  .watchhead h2{font-size:20px}
  .hero-copy h1{font-size:30px}
  .hero-copy .trust{font-size:10px}
  .watchactions .btn{font-size:10px}
  .matches{gap:6px}
}