/* Mobile directory and record controls, v1.4, 2026-09-10.
   Desktop table and supplied editorial layout remain in styles.css. */
.hc-home .tablewrap, .hc-brand .tablewrap { overflow-x:auto; }
@media (min-width:761px) and (max-width:1024px) {
  /* Keep the useful table at tablet widths without desktop padding forcing
     a min-content box wider than its container at the 760/761 boundary. */
  table.dir th, table.dir td { padding-left:10px; padding-right:10px; }
  table.dir th { letter-spacing:.08em; }
}
@media (max-width:760px) {
  /* A table-caption inside a block table creates an anonymous, min-content
     table box in Chrome. Give it the same block layout as the mobile rows. */
  table.dir caption { display:block; width:100%; padding:12px 14px; line-height:1.5; }
  table.dir tr { padding:12px 14px; }
  table.dir td { display:block; padding:2px 0; min-width:0; }
  table.dir td::before { display:none; }
  table.dir td.c-org { padding:0; font-size:17px; line-height:1.35; }
  table.dir td.c-org a { display:flex; align-items:center; min-height:44px; overflow-wrap:anywhere; }
  table.dir td.c-brand { padding:0; }
  table.dir td.c-brand a { display:inline-flex; align-items:center; min-height:44px; }
  table.dir td.c-status { white-space:normal; font-size:12.5px; padding-top:8px; }
  table.dir td.c-act { padding-top:8px; }
  table.dir td.c-act .btn { width:100%; min-height:44px; }
  .directory-code { gap:10px; }
  .directory-code .code { min-height:44px; display:inline-flex; align-items:center; }
  .directory-code .btn, .tablefoot .btn, .finder .btn { min-height:44px; }
  .directory-code .manualcopy { flex-basis:100%; }
  .finder { padding:14px; }
  .finder-row { gap:10px; }
  .field input, .field select, .manualcopy input, .ai-input { font-size:16px; }
  .finder-meta { gap:8px 14px; margin-top:10px; }
  .finder-meta>a { min-height:44px; display:inline-flex; align-items:center; }
  .finder-meta .btn { margin-left:auto; }
  .tablefoot { padding:12px 14px; }

  /* Mobile starts with the task itself. Counts remain in the live finder
     and brand cards; the illustrative record is redundant beside real data. */
  .hc-home>.hero { padding:22px 0 20px; }
  .hc-home>.hero .eyebrow, .hc-home>.hero .statline, .hc-home>.hero .samplecard { display:none; }
  .hc-home>.hero .split { display:block; }
  .hc-home>.hero h1 { font-size:29px; margin-bottom:10px; }
  .hc-home>.hero .lede { font-size:15px; line-height:1.5; margin:0; }
  .hc-home>#directory { padding-top:18px; }
  .hc-home .finder-row { grid-template-columns:minmax(0,1fr) auto; }
  .hc-home .finder-row>.field:first-child { grid-column:1/-1; }
  .hc-home .finder-row>.btn { min-width:100px; min-height:46px; padding:10px 12px; }
  .hc-home .finder-row .field label { font-size:12px; }
  .hc-home .finder-meta>a { flex-basis:100%; }
  .hc-home #directory>.wrap>.sec-head { margin-top:28px!important; }
  .hc-brand>.hero { padding:24px 0; }
  .hc-brand>.hero h1 { margin-bottom:10px; }
  .hc-brand>.hero .lede { font-size:15px; line-height:1.5; margin:0; }
  .hc-brand>#directory { padding-top:24px; }
  /* This select has a single, fixed brand. Its value still accompanies the
     form; repeating the page title here does not give mobile users a choice. */
  .hc-brand .finder-row>.field:nth-child(2) { display:none; }

  .hc-code-detail>.hero { padding:24px 0; }
  .hc-code-detail>.hero .split { gap:18px; }
  .hc-code-detail>.hero .eyebrow { margin-bottom:8px; }
  .hc-code-detail>.hero .lede { margin:10px 0 0; font-size:15px; }
  .codepanel { padding:16px; }
  .codepanel-top { gap:6px; }
  .copyrow { margin-top:12px; gap:8px; }
  .copyrow .btn { min-height:44px; }
  .facts { margin-top:16px; }
  .facts div { padding:12px; }
  .facts dd { overflow-wrap:anywhere; }
  .fb { padding:14px; }
  .fb-opts { grid-template-columns:minmax(0,1fr); margin-top:0; }
  .fb-opt { display:grid; grid-template-columns:19px minmax(0,1fr) auto; gap:9px; padding:12px; min-height:52px; }
  .fb-opt .lbl { font-size:14px; }
  .fb-opt .cnt { margin-left:0; font-size:12px; white-space:nowrap; }
  .fb-actions .btn { min-height:44px; }
  .ai { padding:16px; }
  .ai-log { padding:12px; max-height:280px; }
  .ai-sugg { gap:8px; }
  .ai-chip { min-height:44px; }
  .ai-input { min-height:96px; }
  .ai-bar .btn { min-height:44px; }
}
@media (max-width:360px) {
  .hc-home>.hero { padding:18px 0 16px; }
  .hc-home>.hero h1 { font-size:28px; }
  .hc-home>.hero .lede { font-size:14px; line-height:1.45; }
  .hc-home .finder { padding:12px; }
  .hc-home .finder-row>.btn { min-width:94px; font-size:14px; padding:10px; }
  .hc-home .finder-row .field select { padding-left:9px; padding-right:9px; }
}

/* Tablet and landscape phones retain task-first ordering while the hero is one column. */
@media(min-width:761px) and (max-width:900px){
 .hc-home>.hero{padding:24px 0}
 .hc-home>.hero .eyebrow,.hc-home>.hero .statline,.hc-home>.hero .samplecard{display:none}
 .hc-home>.hero .split{display:block}
 .hc-home>.hero h1{font-size:32px;margin-bottom:10px}
 .hc-home>.hero .lede{font-size:16px;line-height:1.5;margin:0}
 .hc-home>#directory{padding-top:24px}
}