@charset "utf-8";
/* ============================================================
   dcfalv.com legacy Discuz portal - mobile / tablet adaptation layer
   version v2 / 2026-10-26
   Scope : everything inside @media (max-width:1023px); desktop untouched
   Method: pure CSS override, no template/DB change
   Rollback: remove the <link> to this file from header_common.php
   NOTE  : comments MUST stay ASCII. The host page is GBK; non-ASCII
           bytes in this UTF-8 file get mis-decoded and can break
           CSS parsing of the following rules.
   ============================================================ */

@media (max-width:1023px) {

  /* ---------- 1. base: stop whole-page down-scaling ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    min-width: 0 !important;
    width: auto !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
  }

  /* ---------- 2. containers: fixed 998px -> fluid ---------- */
  /* Discuz #toptb also carries min-width:960px; width alone is not enough */
  .wp, .p_wrap, #wp {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .wp { padding-left: 12px; padding-right: 12px; }

  /* ---------- 2b. top bar / header / login bar / footer ---------- */
  #toptb, #hd, #ft, #ct,
  #hd > .wp, #ft > .wp, #ct > .wp,
  .hdc, #lsform, .fastlg, .fastlg .y, .fastlg .pns, .y.pns {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
  }
  /* .hdc and #scbar are wider than .wp's content box, so they sit flush
     against the screen edge; give them the same inset as the page body. */
  .hdc, #scbar {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  /* Discuz mobile switch bar: its target (mobile version) is disabled on this
     site, so on a phone it is a dead end - hide it. */
  body > div.xi1.bm.bm_c { display: none !important; }
  #toptb .y, #toptb .z { float: none !important; display: inline-block !important; }
  .fastlg .y.pns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    margin-top: 8px;
  }

  /* ---------- 3. portal DIY grid: two columns -> stacked ---------- */
  /* DIY blocks carry fixed widths (840/820/419 ...) written by the DIY engine,
     so every container level has to be neutralised, not just .frame */
  .p_sider {
    float: none !important;
    width: auto !important;
    margin-top: 14px !important;
  }
  .first_srcreen, .cont_main, .p_cont, .ad_box, .pic_ad1, .col_1, .col_2,
  .tab_box, .y_focus, .area, .cl_frame_bm, .frame-1-c, .frame-1-1,
  .frame, .frame-1, .column, .block, .move-span, .dxb_bc, .temp, .p_temp {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
  }
  /* focus tab strip uses a fixed 840px width; let it scroll instead */
  ol.tabs, .tabs {
    width: auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .lf, .rf {
    float: none !important;
    display: inline-block !important;
    vertical-align: top;
  }

  /* ---------- 3b. portal side column (category nav) ----------
     side_main is a fixed 156px column; once floats are removed it becomes a
     narrow strip with empty space beside it, so let it span the full width. */
  .side_main, .side_con, .side_box, .y_navi, .y_navi ul,
  .side_main > ul, .side_main ul {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    float: none !important;
    box-sizing: border-box !important;
  }
  /* one category per row, icon + label on a single line */
  .y_navi li, .y_navi li.news {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    float: none !important;
    /* the theme paints rows with a 135px-wide sprite; at full width that
       leaves a ragged edge, so use a plain row background instead */
    background-image: none !important;
    background-color: #f7f8fa !important;
    border-bottom: 1px solid #e8eaee !important;
  }
  .y_navi li a.t, .y_navi li a.t span.more {
    width: auto !important;
    display: block !important;
    font-size: 16px !important;
    line-height: 1.9 !important;
    white-space: normal !important;
  }

  /* ---------- 4. forum / article two-column layout ---------- */
  /* #ct reserves 145px on the left for the theme's side column; on a phone that
     leaves the main column 182px wide and every block overlaps. */
  #ct, #ct.wp, #ct.cl {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
  }
  .ct2 .mn, .ct2 .sd {
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    display: block !important;
  }
  .ct2 .sd { margin-top: 14px !important; }
  /* the reserved side column itself is empty on forum pages */
  #side, .side, .side_main { margin-left: 0 !important; }

  /* ---------- 4b. list rows: fixed-width items become full width ---------- */
  ul.list, ol.list, .headline ul, .headline li,
  ul.list > li, ol.list > li {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
  ul.list > li + li { margin-top: 8px; }

  /* ---------- 4c. forum chrome: header bar + sort bar ---------- */
  .bm_h, .bm_h.cl {
    height: auto !important;
    min-height: 32px !important;
    line-height: 1.9 !important;
    display: block !important;
    padding: 6px 8px !important;
  }
  .bm_h .y, .bm_h .z {
    float: none !important;
    display: inline !important;
    margin-left: 6px !important;
  }
  #threadlist .th, #threadlist .th table, .tl .th, .tl .th table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  #threadlist .th th, #threadlist .th td {
    height: auto !important;
    line-height: 2 !important;
  }

  /* ---------- 5. images and media never overflow ---------- */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }
  .wp img, .p_wrap img { max-width: 100% !important; }

  /* ---------- 6. tables scroll horizontally instead of breaking layout ---------- */
  table { max-width: 100% !important; }
  .tbl, .dt, .bm_c > table, .bm_c table.tbl {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Discuz thread list: with table-layout:fixed the title column (th.common)
     is squeezed to 0px and titles overlap. Auto layout redistributes it. */
  #threadlisttableid, table.datatable {
    width: 100% !important;
    table-layout: auto !important;
  }
  #threadlisttableid th.common, #threadlisttableid th.new {
    width: auto !important;
    min-width: 0 !important;
  }

  /* ---------- 7. navigation wraps ---------- */
  #nv, #nv ul { height: auto !important; white-space: normal !important; }
  #nv li, #um li { float: none !important; display: inline-block !important; }
  #um { float: none !important; }

  /* ---------- 8. body text readability ---------- */
  .pct, .pcb, .article, .bm_c, .pg, .xs2 {
    font-size: 16px !important;
    line-height: 1.85 !important;
  }
  .pct h1, .pct h2, .pct h3, .bm_c h1 {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
  .pct p { margin: 0 0 1em !important; }

  /* ---------- 9. pagination / action bars ---------- */
  .pg, .pns, .pgbtn, .pgt {
    white-space: normal !important;
    height: auto !important;
    line-height: 2.2 !important;
  }

  /* ---------- 10. inputs: avoid iOS auto zoom ---------- */
  input[type="text"], input[type="search"], input:not([type]), textarea, select {
    font-size: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ---------- 11. header search box fills one row ---------- */
  .sch, .scbar, #scbar {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    position: relative;
    z-index: 30;
  }
  .scbar_txt_td, .scbar_btn_td { display: block !important; width: auto !important; }
  /* the search bar itself is a fixed-width table (452px) */
  #scbar table, .scbar table, #scbar_form table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
  }
  #scbar table tbody, #scbar table tr,
  .scbar table tbody, .scbar table tr { display: block !important; width: auto !important; }
  #scbar table td, .scbar table td {
    display: block !important;
    width: auto !important;
    padding: 3px 0 !important;
  }
  #scbar_hot, #scbar_hot a { display: inline-block !important; width: auto !important; }
  #scbar input.px, #scbar .px { width: 100% !important; box-sizing: border-box !important; }
  /* the search button inherits a sprite that renders invisible at this width;
     give it a plain, obviously-tappable look */
  #scbar .scbar_btn, #scbar button, #scbar_btn {
    width: 100% !important;
    min-width: 96px !important;
    height: 38px !important;
    margin: 8px 0 0 0 !important;
    display: block !important;
    background: #16283f !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 4px !important;
    text-align: center !important;
    background-image: none !important;
  }
  #scbar_btn strong, #scbar .scbar_btn strong {
    color: #ffffff !important;
    font-size: 15px !important;
    display: block !important;
    line-height: 38px !important;
    height: 38px !important;
    background: none !important;
  }

  /* ---------- 12. quick login bar: 4-column table -> 2-column grid ----------
     original markup: 2 rows x 4 cells
       row1: [用户名select][username input][自动登录][找回密码]
       row2: [密码label ][password input][登录 btn ][立即注册]
     a 2-column grid turns it into label/field pairs that read naturally. */
  .fastlg .y.pns, #lsform .y.pns {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }
  .fastlg .y.pns table, #lsform .y.pns table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .fastlg .y.pns tbody, #lsform .y.pns tbody { display: block !important; }
  .fastlg .y.pns tr, #lsform .y.pns tr {
    display: grid !important;
    grid-template-columns: 6em minmax(0, 1fr);
    gap: 6px 10px;
    align-items: center;
    margin-bottom: 8px;
  }
  .fastlg .y.pns td, #lsform .y.pns td {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .fastlg .y.pns td:last-child, #lsform .y.pns td:last-child {
    text-align: right;
    white-space: nowrap !important;
  }
  .fastlg input.px, #lsform input.px {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* ---------- 13. safety net: no descendant may exceed its container ----------
     The DIY portal engine writes many one-off fixed widths (392 / 419 / 820 ...)
     and new ones appear whenever the block is re-edited in the admin panel.
     Capping max-width on every descendant is the only stable guard. */
  .p_wrap *, .first_srcreen *, .cont_main *, .p_cont *, .dxb_bc *,
  .ct2 *, .bm_c * {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---------- 14. long titles must wrap, not be hard-clipped ----------
     Several portal blocks use white-space:nowrap + overflow:hidden, which
     silently cuts Chinese titles in half on a narrow screen. */
  .p_wrap a, .p_wrap p, .p_wrap li, .p_wrap h1, .p_wrap h2, .p_wrap h3, .p_wrap h4,
  .p_wrap span, .p_wrap div,
  .cont_main a, .xinkan_rec a,
  .bm_c a, .bm_c td, .bm_c th {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}

/* ---------- phone only (<=767): drop low-value table columns ---------- */
@media (max-width:767px) {
  #threadlisttableid td.by, #threadlisttableid th.by,
  #threadlisttableid td.num, #threadlisttableid th.num,
  table.datatable td.by, table.datatable th.by,
  table.datatable td.num, table.datatable th.num {
    display: none !important;
  }
  #threadlisttableid td.icn, #threadlisttableid th.icn {
    width: 32px !important;
    padding: 6px 4px !important;
  }
  #threadlist .th td.by, #threadlist .th th.by,
  #threadlist .th td.num, #threadlist .th th.num,
  .tl .th td.by, .tl .th th.by,
  .tl .th td.num, .tl .th th.num {
    display: none !important;
  }
  #threadlisttableid th.common a.xst, #threadlisttableid th.new a.xst {
    font-size: 16px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    display: inline-block !important;
  }
}

/* ---------- tablet only (768-1023): keep some information density ---------- */
@media (min-width:768px) and (max-width:1023px) {
  body { font-size: 15px !important; }
  .wp { padding-left: 18px; padding-right: 18px; }
}