/**
 * mobile.css
 * 2026-09 手機版專屬樣式（對齊 0923 mobile.zip／mobile_dark.zip 設計稿）。
 * 每一頁都在自己的 <style> 之後載入這份（要蓋得過去），只有螢幕寬度
 * < 768px 才生效，桌面版完全不受影響。色票、字體沿用各頁既有的 CSS 變數
 * （日間／夜間自動跟著走），不在這裡另外定義顏色。
 *
 * 設計稿的手機版不是把桌面版擠小，而是另一套介面：
 *  - 頂列精簡（品牌＋會員），導覽移到底部固定導覽列（見 mobileNav.js），
 *    字級／日夜間／登入收進「更多設定」抽屜
 *  - 首頁：公司卡的三顆按鈕併成一排、數字磚改橫向滑動卡片、5 大類目改成
 *    帶圖示跟徽章的列表、財報表預設只看最新一期＋YoY
 *  - 自選清單表格改成一檔一張卡片
 * 這份檔案裡首頁專用的選擇器（#board、.tab-bar⋯）在其他頁面不存在，不會
 * 誤傷。
 */

/* ---- 所有寬度：手機專用元素預設不顯示 ---- */
.m-nav,
.m-sheet-backdrop{display:none;}
.m-periods-btn,
.m-scroll-hint{display:none;}

/* 所有裝置：關掉行動瀏覽器的「文字自動放大」（Android Chrome／部分廠牌內建瀏覽器會把它認為
   「文字很多的區塊」的字級自己放大，同一頁字級忽大忽小，換一支手機就變得不好讀）。 */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

@media (max-width:767px){
  /* 手機上最小的兩級字（10／11px）各加大 1px：實機上 10px 的標籤太小、不好讀 */
  :root{--fs-2xs:11px;--fs-xs:12px;}
  /* 常用的小型切換按鈕（預設區間、依季／依年、金額／百分比、篩選藥丸⋯）點擊範圍太小
     （實測高度只有 22～28px），手指容易點偏；至少給到 34px 高 */
  .pe-preset-btn,.mode-btn,.gran-segment button,.pill-tab,.w-chip,.market-tab-btn,.seg button{min-height:34px;}
  .site-footer-links a{display:inline-block;padding:8px 4px;}

  /* ---------- 頁框：頂列、底部導覽、頁尾 ---------- */
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom));}
  .wrap{padding:12px 16px 20px;}
  .topbar-inner{padding:8px 16px;}
  .topbar-row{flex-wrap:nowrap;}
  .topbar-row + .topbar-row{display:none;} /* 導覽列移到底部 */
  .topbar-tools{gap:8px;flex-wrap:nowrap;}
  .topbar-tools .font-size-toggle,
  .topbar-tools .theme-segment{display:none;} /* 收進「更多設定」抽屜 */
  /* 品牌兩行：「易財報 YEEFINANCE」＋下面一行標語（設計稿是 Stock Analysis） */
  .brand{display:grid;grid-template-columns:auto auto 1fr;column-gap:8px;row-gap:0;align-items:center;}
  .brand-mark{grid-row:1 / 3;width:36px;height:36px;}
  .brand-name{grid-column:2;grid-row:1;font-size:18px;line-height:1.2;white-space:nowrap;}
  /* 登入後只留圓形頭像（點了進帳戶頁）；名稱＋登出太長會把品牌擠成兩行，
     登出在帳戶頁跟「更多設定」抽屜裡都有 */
  .topbar .auth-widget:has(.auth-logout-btn) .auth-info,
  .topbar .auth-widget:has(.auth-logout-btn) .auth-logout-btn{display:none;}
  .brand-en{grid-column:3;grid-row:1;}
  .brand-tagline{display:block;grid-column:2 / 4;grid-row:2;border:none;padding:0;font-size:11px;color:var(--faint);}

  .site-footer-inner{padding:20px 16px;}
  .site-footer-top{margin-bottom:12px;}
  .site-footer-links{gap:16px;}
  .site-footer-bottom{flex-direction:column;gap:4px;margin-top:14px;}
  body .feedback-trigger{bottom:calc(76px + env(safe-area-inset-bottom));right:12px;padding:6px 12px;font-size:12px;}

  .m-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter:blur(12px);
    border-top:1px solid var(--hairline);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .m-nav-item{
    flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:none;border:none;border-radius:10px;padding:4px 0;cursor:pointer;
    color:var(--faint);font-family:inherit;font-size:11px;font-weight:600;letter-spacing:0;text-decoration:none;
  }
  .m-nav-item:hover{background:none;color:var(--bone-dim);}
  .m-nav-item .material-symbols-outlined{font-size:24px;}
  .m-nav-item.active,
  .m-nav-item.active:hover{color:var(--brass);}

  /* ---------- 「更多設定」抽屜 ---------- */
  .m-sheet-backdrop{
    position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);
    align-items:flex-end;opacity:0;transition:opacity .18s ease;
  }
  .m-sheet-backdrop:not([hidden]){display:flex;}
  .m-sheet-backdrop.open{opacity:1;}
  .m-sheet{
    width:100%;max-height:88vh;overflow-y:auto;background:var(--panel);
    border-radius:20px 20px 0 0;padding:8px 16px calc(20px + env(safe-area-inset-bottom));
    transform:translateY(24px);transition:transform .18s ease;
  }
  .m-sheet-backdrop.open .m-sheet{transform:none;}
  .m-sheet-grip{width:40px;height:4px;border-radius:999px;background:var(--hairline);margin:4px auto 10px;}
  .m-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .m-sheet-head h2{margin:0;font-family:'Space Grotesk', 'Noto Sans TC', sans-serif;font-size:20px;}
  .m-sheet-close{background:var(--panel-2);border:none;color:var(--bone-dim);width:32px;height:32px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;}
  .m-sheet-close:hover{background:var(--panel-2);color:var(--bone);}
  .m-sheet-group{background:var(--panel-2);border-radius:14px;margin-bottom:12px;overflow:hidden;}
  .m-sheet-group:empty{display:none;}
  .m-sheet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;}
  .m-sheet-row + .m-sheet-row{border-top:1px solid var(--hairline);}
  .m-sheet-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--bone);min-width:0;}
  .m-sheet-label .material-symbols-outlined{font-size:22px;color:var(--brass);}
  .m-seg{display:inline-flex;gap:2px;padding:3px;background:var(--panel);border-radius:10px;flex:none;}
  .m-seg button{
    display:flex;align-items:center;gap:4px;background:transparent;border:none;color:var(--bone-dim);
    font-family:inherit;font-size:13px;font-weight:600;letter-spacing:0;padding:6px 12px;border-radius:8px;
  }
  .m-seg button .material-symbols-outlined{font-size:16px;}
  .m-seg button:hover{background:transparent;color:var(--bone);}
  .m-seg button.active{background:var(--brass);color:var(--accent-ink);}
  .m-sheet-btn{
    background:var(--panel);border:1px solid var(--hairline);color:var(--bone);border-radius:8px;
    font-family:inherit;font-size:13px;font-weight:700;letter-spacing:0;padding:7px 14px;
  }
  .m-sheet-btn:hover{background:var(--panel);border-color:var(--brass);color:var(--brass);}
  .m-sheet-btn.primary{background:var(--brass);border-color:var(--brass);color:var(--accent-ink);}
  .m-sheet-btn.primary:hover{background:var(--brass-hover);color:var(--accent-ink);}
  .m-sheet-account{
    display:flex;align-items:center;gap:10px;padding:14px;text-decoration:none;color:var(--bone);
    font-size:15px;font-weight:600;border-top:1px solid var(--hairline);
  }
  .m-sheet-account .material-symbols-outlined{font-size:22px;color:var(--brass);}
  .m-sheet-account .chev{margin-left:auto;color:var(--faint);}
  .m-sheet-links a,
  .m-sheet-links button{
    display:flex;align-items:center;gap:10px;width:100%;text-align:left;text-decoration:none;
    background:transparent;border:none;border-radius:0;color:var(--bone);
    font-family:inherit;font-size:15px;font-weight:600;letter-spacing:0;padding:14px;
  }
  .m-sheet-links a + a,
  .m-sheet-links a + button{border-top:1px solid var(--hairline);}
  .m-sheet-links button:hover{background:transparent;color:var(--brass);}
  .m-sheet-links .material-symbols-outlined{font-size:22px;color:var(--brass);}
  .m-sheet-links .chev{margin-left:auto;color:var(--faint);}

  /* ---------- 首頁：搜尋卡片 ---------- */
  .sidebar{display:none;} /* 自選清單改由底部導覽進入專屬頁面 */
  /* 修：手機版 .app-body 是直向排列，但桌面版留下的 align-items:flex-start
     會讓子元素只有「內容寬度」而不是撐滿——不換行的熱搜晶片列把整頁
     撐到 500px 以上，畫面橫向溢出。要明確撐滿、並允許縮小。 */
  .app-body{margin-top:0;flex-direction:column;align-items:stretch;}
  .content-col,
  .main{width:100%;max-width:100%;min-width:0;}
  .search-card{padding:12px;margin-bottom:12px;border-radius:14px;}
  .search-plate{flex-wrap:nowrap;gap:8px;}
  /* 修：輸入框有 44px 左右內距＋預設最小寬度（約 20 個字元），在窄螢幕
     上會把旁邊的「查詢」按鈕整個蓋住——要讓欄位可以縮到比內容小。 */
  .search-plate .code-field{flex:1 1 0;min-width:0;}
  .search-card #codeInput{min-width:0;padding-top:10px;padding-bottom:10px;padding-right:12px;}
  .search-kbd{display:none;}
  .search-card .status,
  .search-card .quota-widget{font-size:11px;margin-top:8px;}
  #searchBtn{padding:10px 16px;font-size:15px;}
  #searchBtn .material-symbols-outlined{display:none;}
  .hot-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px -12px 0 0;padding-right:12px;}
  .hot-chips::-webkit-scrollbar{display:none;}
  .hot-chip,
  .hot-chips-label{flex:none;white-space:nowrap;}

  /* ---------- 首頁：公司卡（台股／美股共用） ---------- */
  .company-plate{flex-direction:column;align-items:stretch;padding:16px;gap:14px;margin-bottom:12px;border-radius:14px;}
  .cp-id{gap:10px;}
  .company-plate .code{font-size:26px;}
  .cp-quote{margin-right:0;column-gap:10px;}
  .company-price{font-size:40px;}
  .cp-actions{
    width:100%;display:grid;grid-template-columns:repeat(3, 1fr);gap:4px;
    background:var(--panel-2);padding:4px;border-radius:12px;
  }
  .cp-actions-row{display:contents;}
  .cp-actions .star-btn{background:transparent;padding:10px 4px;font-size:12px;gap:4px;border-radius:9px;min-width:0;flex:none;}
  .cp-actions .star-btn:hover{background:transparent;border-color:transparent;}
  .cp-actions .star-btn.active{background:var(--panel);color:var(--brass);box-shadow:0 1px 2px rgba(15,23,42,.12);}
  .cp-actions .star-btn.cp-primary{background:transparent;color:var(--bone);}
  .cp-actions .star-btn .material-symbols-outlined{font-size:16px;}

  /* ---------- 首頁：類股橫幅、數字磚、摘要 ---------- */
  .industry-plate{padding:10px 12px;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px;border-radius:14px;}
  .industry-peers{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;}
  .industry-peers::-webkit-scrollbar{display:none;}
  .industry-peer-chip,
  .industry-peers-label,
  .industry-peer-more{flex:none;white-space:nowrap;}

  /* 數字磚：橫向滑動卡片（設計稿「核心營運與財務 KPI，向右滑動探索」） */
  .stat-tiles{
    display:flex !important;overflow-x:auto;scroll-snap-type:x proximity;gap:10px;
    margin:0 -16px 14px;padding:2px 16px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .stat-tiles:empty{display:none !important;}
  .stat-tiles::-webkit-scrollbar{display:none;}
  .stat-tiles .cell{flex:0 0 150px;scroll-snap-align:start;padding:12px 14px;}
  .stat-tiles .cell .value{font-size:24px;}

  .insights-panel.insights-cards{grid-template-columns:1fr;gap:12px;margin-bottom:12px;}
  .insights-card{padding:16px;border-radius:14px;}
  .insights-para{font-size:15px;}

  /* ---------- 首頁：5 大類目（手風琴 → 圖示＋徽章列表） ---------- */
  .tab-bar{padding:0;background:transparent;border:none;box-shadow:none;gap:10px;margin-bottom:12px;}
  .tab-bar-row,
  .tab-bar-row.expanded{
    background:var(--panel);border:1px solid var(--hairline);border-radius:14px;
    box-shadow:0 1px 3px rgba(15,23,42,.06);
  }
  .tab-bar-row.expanded{
    background:color-mix(in srgb, var(--brass) 6%, var(--panel));
    border-color:color-mix(in srgb, var(--brass) 45%, var(--hairline));
  }
  .tab-row-label,
  .tab-row-label.active{padding:12px 14px;gap:12px;background:transparent;}
  .tab-row-label > .material-symbols-outlined:first-child{
    flex:none;width:44px;height:44px;border-radius:12px;background:var(--panel-2);color:var(--brass);
    display:flex;align-items:center;justify-content:center;font-size:24px;
  }
  .tab-row-label.active > .material-symbols-outlined:first-child{background:var(--brass);color:var(--accent-ink);}
  .tab-row-text{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;white-space:normal;overflow:visible;text-overflow:clip;}
  .tab-row-name{font-size:16px;font-weight:700;color:var(--bone);}
  .tab-row-label.active .tab-row-name{color:var(--brass);}
  .tab-row-badge{
    display:inline-block;justify-self:start;font-size:11px;font-weight:700;line-height:1.5;padding:1px 8px;border-radius:999px;
    background:color-mix(in srgb, var(--brass) 12%, transparent);color:var(--brass);white-space:nowrap;
  }
  .tab-row-badge:empty{display:none;}
  .tab-row-desc{grid-column:1 / -1;font-size:12px;font-weight:400;color:var(--bone-dim);margin-top:2px;white-space:normal;}
  .tab-row-desc::before,
  .tab-row-desc::after{content:none;}
  .tab-row-buttons{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:0 14px 14px;scrollbar-width:none;}
  .tab-row-buttons::-webkit-scrollbar{display:none;}
  .tab-btn{flex:none;background:var(--panel-2);border-radius:999px;padding:8px 16px;font-size:14px;}

  /* ---------- 首頁：時間區間、報表卡片、財報表 ---------- */
  .range-field{padding:10px 12px;gap:8px;border-radius:14px;}
  .range-field .pe-preset-group{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;}
  .range-field .pe-preset-group::-webkit-scrollbar{display:none;}
  .pe-preset-btn{flex:none;}
  .gran-segment{margin-left:0;}
  .report-card{padding:14px;border-radius:14px;}
  .report-card-head{margin-bottom:10px;}
  .report-tools{width:100%;justify-content:space-between;}
  .chart-box{height:220px;padding:10px;}

  /* 財報三表預設只看最新一期＋YoY（單欄列表）；「全部期別」按鈕切回多期橫向捲動 */
  .m-periods-btn{
    display:inline-flex;align-items:center;background:var(--panel-2);border:none;color:var(--brass);
    font-family:inherit;font-size:12px;font-weight:700;letter-spacing:0;padding:6px 10px;border-radius:8px;
  }
  .m-periods-btn:hover{background:var(--panel-2);color:var(--brass-hover);}
  section.report:not(.show-all-periods) :is([data-kind="income"], [data-kind="balance"], [data-kind="cashflow"]) :is(th, td):not(:first-child):not(.col-latest):not(.col-yoy){display:none;}
  section.report:not(.show-all-periods) table{min-width:0;}
  .m-scroll-hint{display:block;text-align:center;font-size:11px;color:var(--faint);margin:6px 0 0;}
  section.report:not(.show-all-periods) .m-scroll-hint{display:none;}
  /* 手機版表格不分頁：所有年度在同一張表裡用手指左右滑動看，翻頁按鈕
     不需要（月營收歷史表資料太多，維持分頁） */
  .table-pager:not(#revenueHistoryTablePager){display:none;}
  /* 表格名稱欄（第一欄）一律釘在左邊，滑動時才知道每列是什麼 */
  .table-scroll th:first-child,
  .table-scroll td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);}
  .table-scroll thead th:first-child{background:color-mix(in srgb, var(--brass) 6%, var(--panel));}
  /* 釘住的欄位蓋住了 border-collapse 的格線，用 inset 陰影補畫底線／右邊線 */
  .table-scroll th:first-child,
  .table-scroll td:first-child{box-shadow:inset -1px -1px 0 var(--hairline);}
  /* 美股面板的表格（usStock.js 自己的一套）：同樣不分頁、名稱欄釘在左邊 */
  #usTablePager,
  #usGuruPager{display:none !important;}
  .us-stock-panel .us-table-scroll th:first-child,
  .us-stock-panel .us-table-scroll td:first-child{
    position:sticky;left:0;z-index:1;background:var(--panel);min-width:112px;
    box-shadow:inset -1px -1px 0 var(--hairline);white-space:normal;
  }
  .us-stock-panel .us-table-scroll thead th:first-child{background:color-mix(in srgb, var(--brass) 6%, var(--panel));}
  .us-stock-panel .us-table-scroll td:first-child[style]{padding-left:12px !important;}
  /* 全部期別模式：名稱欄固定寬度並釘在左側，數字欄橫向捲動 */
  section.report.show-all-periods .table-scroll th:first-child,
  section.report.show-all-periods .table-scroll td:first-child{min-width:132px;position:sticky;left:0;z-index:1;background:var(--panel);}
  section.report.show-all-periods .table-scroll thead th:first-child{background:color-mix(in srgb, var(--brass) 6%, var(--panel));}
  .table-scroll table th:first-child,
  .table-scroll table td:first-child{min-width:0;}
  .table-scroll td{padding-top:12px;padding-bottom:12px;}
  /* 科目縮排是程式寫進 inline style 的（見 app.js renderTablePage()），完整
     模式下巢狀很深的科目會把名稱欄擠到只剩幾個字寬——手機上統一縮小。 */
  .table-scroll td:first-child[style]{padding-left:12px !important;}
  table caption span{display:block;float:none !important;margin:0 0 4px;}
  .hc-card{padding:16px;border-radius:14px;}
  .tip-callout{padding:14px;border-radius:14px;}

  /* ---------- 其他頁面共用（自選清單／篩選器／類股／財報下載／個股比較） ---------- */
  .global-search{padding:8px;margin-bottom:14px;border-radius:14px;}
  .global-search form{flex:1 1 100%;}
  .global-search .gs-hot{display:none;}
  .global-search .btn{font-size:0;gap:0;padding:9px 12px;}
  .page-head{gap:12px;margin-bottom:14px;}
  .page-title h1{font-size:26px;}
  .page-title > .material-symbols-outlined{font-size:26px;}
  .page-sub{font-size:13px;}
  .page-actions{width:100%;}
  .page-actions .btn{flex:1 1 calc(50% - 4px);min-width:0;padding:9px 8px;font-size:12px;}
  .kpi-row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
  .kpi{padding:12px 14px;border-radius:14px;}
  .kpi-value{font-size:22px;}
  .card{padding:14px;border-radius:14px;}
  .r-hero{padding:16px;}
  .preset-row{display:flex;overflow-x:auto;gap:10px;margin:0 -16px 16px;padding:2px 16px 6px;scrollbar-width:none;}
  .preset-row::-webkit-scrollbar{display:none;}
  .preset-chip{flex:0 0 220px;}
  .rule-card{flex:0 0 250px;}
  .myrules-empty{flex:0 0 100%;}
  .myrules-head .btn{padding:6px 10px;}
  .theme-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;}
  .theme-tabs::-webkit-scrollbar{display:none;}
  .theme-tabs .pill-tab{flex:none;}

  /* 自選清單：表格改成一檔一張卡片（名稱＋現價一行，四個指標一行，操作一行） */
  #wlTableWrap{border:none;background:transparent;}
  #wlTable,
  #wlTable tbody{display:block;}
  #wlTable thead{display:none;}
  #wlTable tr.w-row{
    display:grid;grid-template-columns:repeat(4, 1fr);gap:10px 8px;padding:14px;margin-bottom:10px;
    background:var(--panel);border:1px solid var(--hairline);border-radius:14px;
  }
  #wlTable td{display:block;padding:0;border:none;text-align:left;white-space:normal;}
  /* 拖曳排序把手：卡片左側一條整高的觸控區（早期版本把這欄整個藏起來，手機上就完全不能排序） */
  #wlTable tr.w-row{position:relative;padding-left:52px;}
  #wlTable td.w-handle-col{display:flex;position:absolute;left:0;top:0;bottom:0;width:40px;align-items:center;justify-content:center;
    background:var(--panel-2);border-right:1px solid var(--hairline);border-radius:14px 0 0 14px;}
  #wlTable .w-handle{font-size:24px;padding:16px 8px;line-height:1;}
  #wlTable td:nth-child(2){grid-column:1 / 4;}
  #wlTable td.price-cell{grid-column:4;text-align:right;}
  #wlTable td[data-label]{font-size:13px;}
  #wlTable td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;color:var(--faint);margin-bottom:2px;}
  #wlTable td:last-child{grid-column:1 / -1;}
  #wlTable td.empty{grid-column:1 / -1;text-align:center;}
  #wlTable .w-actions{justify-content:flex-end;}
  #wlTableWrap.table-wrap{overflow:visible;}
}

/* 觸控裝置（手機橫放、平板，寬度 1100px 以內）：表格一樣不分頁、用手指滑動。
   跟上面 <768px 區塊裡同樣幾條規則重複寫一次，因為橫放時版面還是桌面版，
   不會套用上面那整個手機區塊。 */
@media (pointer:coarse) and (max-width:1100px){
  .table-pager:not(#revenueHistoryTablePager){display:none;}
  #usTablePager,
  #usGuruPager{display:none !important;}
  .table-scroll th:first-child,
  .table-scroll td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);box-shadow:inset -1px -1px 0 var(--hairline);}
  .table-scroll thead th:first-child{background:color-mix(in srgb, var(--brass) 6%, var(--panel));}
  .us-stock-panel .us-table-scroll th:first-child,
  .us-stock-panel .us-table-scroll td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);box-shadow:inset -1px -1px 0 var(--hairline);}
  .us-stock-panel .us-table-scroll thead th:first-child{background:color-mix(in srgb, var(--brass) 6%, var(--panel));}
}