/* Reference shared styles loaded after site-v110.css */
.reference-home .hero-subline,.reference-page .lead{max-width:860px}
.reference-home .toolbar-filters .filter-chip{display:inline-flex}
.reference-page .dot{width:4px;height:4px;border-radius:999px;background:var(--muted-2);display:inline-block}
.ref-empty{padding:28px;text-align:center;color:var(--muted)}

/* v1.3.8 Reference mobile-first layout corrections */
.reference-page{overflow-x:hidden}
.reference-page .ref-primary-card,
.reference-page .ref-panel,
.reference-page .ref-related a,
.reference-page .related-tool-card{min-width:0}
.reference-page .ref-panel,
.reference-page .ref-note,
.reference-page .ref-related a,
.reference-page .related-tool-card,
.reference-page .ref-sources{overflow-wrap:anywhere}

/* Reference tables become readable stacked records below desktop width. */
@media(max-width:979px){
  .reference-page .ref-table-wrap{overflow:visible;border:0;background:transparent}
  .reference-page .ref-table{width:100%;min-width:0;border-collapse:separate;font-size:.84rem}
  .reference-page .ref-table tbody{display:grid;gap:9px}
  .reference-page .ref-table tbody tr{padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--surface)}
  .reference-page .ref-table td{display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:9px;padding:5px 0;border:0;overflow-wrap:anywhere;word-break:normal}
  .reference-page .ref-table td::before{content:attr(data-label);font-weight:850;color:var(--muted-2);font-size:.68rem;line-height:1.45}
  .reference-page .ref-table code{white-space:normal;overflow-wrap:anywhere}
}

@media(max-width:699px){
  .reference-page .site-header{height:60px}
  .reference-page .wrap{width:min(100% - 24px,1180px)}
  .reference-page .brand{gap:8px}
  .reference-page .brand-mark{width:31px;height:31px;border-radius:10px}
  .reference-page .brand-name{font-size:.86rem}
  .reference-page .header-actions{gap:4px}
  .reference-page .header-actions .lang-switch{display:flex;padding:2px}
  .reference-page .header-actions .seg-btn{min-width:30px;height:30px;padding:0 5px;font-size:.66rem}
  .reference-page .header-actions .icon-btn{width:34px;height:34px;border-radius:10px}
  .reference-page .header-actions [data-share-page]{display:none}

  .reference-page .tool-hero{padding:12px 0 12px}
  .reference-page .breadcrumb{display:flex;flex-wrap:wrap;gap:3px 5px;padding-top:8px;font-size:.66rem;line-height:1.45;overflow-wrap:anywhere}
  .reference-page .tool-heading{grid-template-columns:40px minmax(0,1fr);gap:10px}
  .reference-page .tool-heading .tool-icon{width:40px;height:40px;border-radius:12px}
  .reference-page .tool-heading .tool-icon svg{width:21px;height:21px}
  .reference-page .tool-kicker{gap:5px;font-size:.6rem;letter-spacing:.025em;flex-wrap:wrap}
  .reference-page .tool-heading h1{margin-top:3px;font-size:clamp(1.35rem,6vw,1.65rem);line-height:1.2;letter-spacing:-.035em;overflow-wrap:anywhere}
  .reference-page .tool-heading .lead{margin-top:7px;font-size:.82rem;line-height:1.65}

  /* Navigation actions: predictable 2 x 2 grid, no broken labels. */
  .reference-page .tool-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:11px}
  .reference-page .tool-actions>*{width:100%;min-width:0;min-height:40px;flex:none;padding:7px 6px;font-size:.7rem;white-space:nowrap}
  .reference-page .tool-actions .text-btn svg{width:14px;height:14px}

  .reference-page .section{padding-top:8px;padding-bottom:54px}
  .reference-page .ref-detail-layout{gap:12px;padding-bottom:34px}
  .reference-page .ref-primary-card{border-radius:14px}
  .reference-page .ref-section{padding:12px 12px 0}
  .reference-page .ref-section:last-child{padding-bottom:12px}
  .reference-page .ref-section>h2{margin-bottom:9px;font-size:1rem;line-height:1.4}
  .reference-page .ref-panel{padding:11px;border-radius:13px}
  .reference-page .ref-note{margin-bottom:12px;padding:11px 12px;font-size:.78rem;line-height:1.6}
  .reference-page .ref-controls{gap:9px;margin-bottom:11px}
  .reference-page .ref-field{min-width:0;width:100%}
  .reference-page .ref-field input,.reference-page .ref-field select{width:100%;min-width:0}

  .reference-page .ref-table tbody{gap:8px}
  .reference-page .ref-table tbody tr{padding:9px 10px;border-radius:12px}
  .reference-page .ref-table td{grid-template-columns:minmax(78px,32%) minmax(0,1fr);gap:8px;padding:4px 0;font-size:.78rem;line-height:1.5}
  .reference-page .ref-table td::before{font-size:.64rem}
  .reference-page .ref-badge{font-size:.64rem;padding:3px 6px}
  .reference-page .ref-copy{padding:3px 5px;font-size:.72rem}

  .reference-page .ref-related{grid-template-columns:1fr;gap:8px}
  .reference-page .ref-related a{padding:11px 12px;font-size:.82rem;line-height:1.5}
  .reference-page .ref-related small{display:inline-block;margin-top:3px;white-space:nowrap}

  .reference-page .seo-support{padding:4px 0 24px}
  .reference-page .seo-related h2{font-size:1rem}
  .reference-page .related-tool-grid{gap:8px}
  .reference-page .related-tool-card{padding:13px;border-radius:13px}
  .reference-page .related-tool-card strong{font-size:.84rem}
  .reference-page .related-tool-card span{font-size:.72rem;line-height:1.55}

  .reference-page .footer-links{gap:8px 12px}
  .reference-page .footer-links a{white-space:nowrap}
}

/* Reference index: keep cards narrow and text legible on phones. */
@media(max-width:699px){
  .reference-home .hero{padding:34px 0 22px}
  .reference-home .hero-copy h1{font-size:clamp(1.9rem,9vw,2.55rem)}
  .reference-home .hero-subline{font-size:.82rem;line-height:1.6}
  .reference-home .home-toolbar{top:60px}
  .reference-home .tool-grid{gap:9px}
  .reference-home .tool-card{width:100%;max-width:100%}
  .reference-home .tool-title{overflow-wrap:anywhere}
  .reference-home .tool-desc{overflow-wrap:anywhere}
}
@media(max-width:979px){
  .reference-page .ref-table td:first-child{display:block;padding:2px 0 7px;font-weight:850;font-size:.84rem;line-height:1.45}
  .reference-page .ref-table td:first-child::before{display:none}
}


/* v1.3.9: Reference content itself becomes vertical on phones, not a compact horizontal row. */
@media(max-width:699px){
  /* Reference index cards: undo the generic home mobile compact-row treatment. */
  body.reference-home.home-premium .tool-grid{grid-template-columns:1fr;gap:11px}
  body.reference-home.home-premium .tool-card{
    display:flex;
    width:100%;
    max-width:100%;
    min-height:0;
    border-top:2px solid color-mix(in srgb,var(--card-accent) 72%,transparent);
    border-radius:15px;
  }
  body.reference-home.home-premium .tool-link{
    display:flex;
    flex-direction:column;
    padding:15px 15px 14px;
  }
  body.reference-home.home-premium .tool-top{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding-right:36px;
  }
  body.reference-home.home-premium .tool-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:12px;
  }
  body.reference-home.home-premium .tool-title{
    margin-top:3px;
    padding-right:0;
    font-size:.94rem;
    line-height:1.42;
    overflow-wrap:anywhere;
  }
  body.reference-home.home-premium .tool-desc{
    display:block;
    margin-top:9px;
    font-size:.75rem;
    line-height:1.65;
    -webkit-line-clamp:unset;
    overflow:visible;
  }
  body.reference-home.home-premium .tool-footer{
    display:flex;
    position:static;
    align-items:center;
    justify-content:space-between;
    gap:9px;
    flex-wrap:wrap;
    margin-top:auto;
    padding:12px 0 0;
  }
  body.reference-home.home-premium .tool-tags{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
  }
  body.reference-home.home-premium .mini-tag:nth-child(n){display:inline-flex}
  body.reference-home.home-premium .open-label{
    position:static;
    order:initial;
    width:auto;
    min-width:72px;
    min-height:34px;
    padding:0 11px;
    transform:none;
    border-radius:9px;
    background:#08111f;
    color:#fff;
    font-size:.72rem;
    justify-content:center;
  }
  body.reference-home.home-premium .open-label::after{content:none}
  body.reference-home.home-premium .favorite-btn{
    display:grid;
    top:10px;
    right:10px;
    bottom:auto;
    width:34px;
    height:34px;
  }
  body.reference-home.home-premium .new-badge{display:inline-flex}

  /* Detail records: labels above values instead of compressed horizontal key/value rows. */
  .reference-page .ref-table tbody tr{
    padding:10px 11px;
  }
  .reference-page .ref-table td{
    display:block;
    padding:7px 0;
    font-size:.79rem;
    line-height:1.6;
  }
  .reference-page .ref-table td + td{
    border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  }
  .reference-page .ref-table td::before{
    display:block;
    margin:0 0 2px;
    font-size:.63rem;
    line-height:1.35;
  }
  .reference-page .ref-table td:first-child{
    padding:2px 0 8px;
    font-size:.88rem;
    line-height:1.45;
    border-top:0;
  }
  .reference-page .ref-table td:first-child::before{display:none}

  /* Related/navigation links: short, clean vertical cards; no awkward no-wrap fragments. */
  .reference-page .ref-related a{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    min-width:0;
    padding:11px 12px;
    line-height:1.45;
  }
  .reference-page .ref-related a,
  .reference-page .ref-related strong,
  .reference-page .ref-related span,
  .reference-page .ref-related small{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .reference-page .ref-related small{
    display:block;
    margin-top:2px;
  }
}