/*
 * K.I.R.I.N. Sprint40
 * iPhone Races Phase1
 *
 * Home iPhone header is the baseline.
 * This file changes only the Races view at <=480px.
 */
@media screen and (max-width:480px){

  /* Home global header/nav is the baseline: no override here. */

  /* Race-page intro uses the same 14 / 10 / 22 / 10 density as Home race identity. */
  .kirin-races-header{
    padding:14px;
    gap:0;
  }

  .kirin-races-header>div{
    gap:3px;
  }

  .kirin-races-header .kirin-breadcrumb{
    margin:0 0 3px;
    font-size:10px;
    line-height:1.3;
  }

  .kirin-races-header h1{
    margin:0;
    font-size:22px;
    line-height:1.22;
  }

  .kirin-races-header h1 span{
    font-size:10px;
  }

  .kirin-races-header>div>p:last-child{
    margin:3px 0 0;
    font-size:10px;
    line-height:1.4;
  }

  /* Toolbar density */
  .kirin-races-toolbar{
    gap:7px;
    padding:8px;
  }

  .kirin-races-toolbar>input{
    min-height:36px;
    padding:0 10px;
  }

  /* Filter summary: selected condition sits directly beside "フィルター". */
  .kirin-races-filter-accordion>summary{
    justify-content:flex-start;
    min-height:38px;
    padding:0 10px;
    gap:8px;
  }

  .kirin-races-filter-accordion>summary strong{
    margin-left:4px;
    text-align:left;
  }

  .kirin-races-filter-accordion>summary::after{
    margin-left:auto;
  }

  .kirin-races-filter-content{
    gap:10px;
    padding:8px 10px 10px;
  }

  /* Source stays balanced 2 x 2. */
  .kirin-races-source-filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /*
   * Status = 3 + 2 balanced rows.
   * 6-column grid:
   *   row1: 2+2+2
   *   row2: 3+3
   */
  .kirin-races-status-filters{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .kirin-races-status-filters button{
    grid-column:span 2!important;
  }

  .kirin-races-status-filters button:nth-child(4),
  .kirin-races-status-filters button:nth-child(5){
    grid-column:span 3!important;
  }

  .kirin-races-source-filters button,
  .kirin-races-status-filters button{
    min-height:32px;
    padding:0 6px;
    font-size:9px;
  }

  /* Race cards: keep all information, remove excess vertical air. */
  .kirin-races-grid{
    gap:7px;
  }

  .kirin-races-card{
    min-height:82px;
    padding:9px 10px;
  }

  .kirin-races-card-heading{
    gap:4px;
  }

  .kirin-races-card-heading-top,
  .kirin-races-card-heading-bottom{
    gap:7px;
  }

  .kirin-races-card em,
  .kirin-races-card footer span{
    padding:2px 5px;
  }

  /*
   * Races-only height contract.
   * Remove the large black tail after the footer when results are few.
   * :has scopes this strictly to the Races view.
   */
  html:has(.kirin-races-screen),
  body:has(.kirin-races-screen),
  .kirin-app:has(.kirin-races-screen),
  .kirin-shell:has(.kirin-races-screen),
  .kirin-main:has(.kirin-races-screen){
    min-height:0!important;
    height:auto!important;
  }

  .kirin-main:has(.kirin-races-screen){
    align-content:start;
  }

  .kirin-main:has(.kirin-races-screen) .kirin-global-footer{
    margin-top:16px;
    padding-bottom:14px;
  }
}


/* === Sprint40 iPhone Races Phase2 === */
@media screen and (max-width:480px){

  /*
   * Races intro header = Home race-info visual contract.
   * Home itself is not touched.
   */
  .kirin-races-header{
    box-sizing:border-box;
    padding:14px;
    border:1px solid var(--line-soft);
    border-radius:14px;
    background:#0b0e0b;
  }

  .kirin-races-header>div{
    display:grid;
    gap:0;
    min-width:0;
  }

  .kirin-races-header .kirin-breadcrumb{
    margin:0 0 3px;
    color:var(--muted);
    font-size:10px;
    line-height:1.3;
  }

  .kirin-races-header h1{
    margin:0;
    color:#f0f3ef;
    font-size:22px;
    line-height:1.22;
    letter-spacing:.02em;
    font-weight:700;
  }

  .kirin-races-header h1 span{
    margin-left:4px;
    color:var(--gold-soft);
    font-size:10px;
    font-weight:700;
  }

  .kirin-races-header>div>p:last-child{
    margin:3px 0 0;
    color:var(--muted);
    font-size:10px;
    line-height:1.35;
    text-align:left;
  }

  /*
   * Remove the false lower air in each race card.
   * Base CSS defines 3 explicit rows although the renderer has one main child.
   */
  .kirin-races-card{
    grid-template-rows:auto!important;
    align-content:center;
    min-height:0;
    padding:9px 10px;
    gap:0;
  }

  .kirin-races-card-heading{
    gap:4px;
  }

  .kirin-races-card-heading-top,
  .kirin-races-card-heading-bottom{
    gap:6px;
  }

  .kirin-races-card-heading-bottom{
    margin:0;
  }

  .kirin-races-card footer{
    margin:0;
  }
}
/* === /Sprint40 iPhone Races Phase2 === */