/* ===================================================================
   Cortex Cabinet responsive overrides.
   Loaded after tokens.css and page-local styles. Keep all changes inside
   <=1024px / <=640px so desktop viewports above 1024px remain untouched.
   =================================================================== */

@media (max-width: 1024px) {
  .app,
  .topbar,
  .crumbs-row,
  .hero,
  .head,
  .dash-head,
  .atlas,
  .atlas-wrap,
  .chart-panel,
  .twrap,
  .matrix,
  .matrix-frame,
  .mx-grid,
  .base-wrap,
  .conn-grid,
  .settings-grid,
  .entry-grid,
  .sys-grid,
  .ix-grid,
  .kpis,
  .ways,
  .card,
  .panel,
  .sum-card,
  .hub-card,
  .mirror,
  .conn,
  .entry-card,
  .sys-card,
  .ix-card,
  .base-counts,
  .recent {
    min-width: 0;
    max-width: 100%;
  }

  .topbar {
    flex-wrap: wrap;
  }

  .brandmark,
  .top-right,
  .crumbs,
  .crumbs-row,
  .sec-title,
  .sec-head,
  .fbar,
  .fgroup,
  .ctrl-row,
  .conn-top,
  .conn-act,
  .entry-head,
  .entry-foot,
  .disc-controls,
  .upl-row,
  .note-row,
  .set-row,
  .profile,
  .footer-nav,
  .foot {
    min-width: 0;
    max-width: 100%;
  }

  .lead,
  .sec-intro,
  .conn-desc,
  .feedlink__desc,
  .f-note,
  .f-replyline,
  .atm-sum p,
  .ix-card p,
  .sys-card p,
  .way-body p,
  .mirror p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .chart,
  .emblem,
  img,
  svg,
  canvas,
  video,
  audio {
    max-width: 100%;
  }

  .twrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .tbl {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .app {
    gap: var(--s6);
    padding: var(--s5) var(--s3) var(--s7);
  }

  .topbar {
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s3);
  }

  .topbar .brandmark {
    flex: 1 1 100%;
  }

  .top-right {
    flex: 1 1 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: var(--s2);
  }

  .theme-btn,
  .icon-link,
  .refresh-btn,
  .hid-toggle,
  .tr-toggle,
  .f-mini,
  .conn-2,
  .path-2 {
    max-width: 100%;
  }

  .crumbs-row {
    padding: var(--s3);
    flex-wrap: wrap;
    overflow-wrap: anywhere;
  }

  .head,
  .dash-head,
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s5);
    align-items: start;
  }

  .head h1,
  .hero h1,
  .dash-head h1 {
    font-size: var(--t-h1);
  }

  .head-title,
  .summary-top,
  .sum-top,
  .sec-head,
  .sec-title,
  .chart-top,
  .recent-head,
  .conn-top,
  .entry-head,
  .ix-head,
  .profile,
  .set-row,
  .link-row {
    flex-wrap: wrap;
  }

  .sum,
  .index,
  .index__list,
  .index__legend,
  .legend,
  .ctrl-row,
  .fbar,
  .fgroup,
  .conn-act,
  .entry-foot,
  .disc-controls,
  .upl-row,
  .filelist {
    align-items: flex-start;
  }

  .sum .chip,
  .index__list,
  .index__legend,
  .legend,
  .bot-chip,
  .sample-note,
  .conn-sync,
  .sync-meta,
  .f-change,
  .f-admin {
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal;
  }

  .summary,
  .sum-card,
  .hub-card,
  .chart-panel,
  .kpi,
  .panel,
  .conn,
  .entry-card,
  .sys-card,
  .ix-card,
  .base-counts,
  .recent,
  .mirror,
  .feedlink,
  .ways {
    width: 100%;
  }

  .dash-head .sum-card,
  .head .hub-card {
    max-width: 100%;
  }

  .kpis,
  .conn-grid,
  .conn-grid.cols-2,
  .settings-grid,
  .entry-grid,
  .sys-grid,
  .ix-grid,
  .base-wrap,
  .mx-grid,
  .ways {
    grid-template-columns: 1fr;
  }

  .way + .way {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .fbar {
    gap: var(--s3);
    padding: var(--s4);
  }

  .fgroup,
  .search,
  .note-row,
  .claude-keyrow,
  .claude-form,
  .conn-paths,
  .disc-result {
    width: 100%;
  }

  .fseg,
  .st-seg,
  .lang-seg,
  .seg {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fseg button,
  .st-seg button,
  .lang-seg button,
  .seg button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .fdate,
  .search input,
  .key-input,
  .note-input,
  .note-area,
  .note-select,
  .intake-ta,
  .f-reply-ta,
  .select,
  .select select {
    width: 100%;
    max-width: 100%;
  }

  .note-row {
    flex-direction: column;
    align-items: stretch;
  }

  .note-row .note-select {
    width: 100%;
  }

  .note-row .btn,
  .conn-act .btn,
  .entry-foot .btn,
  .mirror-cta,
  .mirror-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .act-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .act-cat,
  .act-body,
  .act-go {
    grid-column: 1;
    grid-row: auto;
  }

  .act-go {
    justify-self: start;
    white-space: normal;
  }

  .matrix {
    grid-template-columns: minmax(34px, auto) repeat(3, minmax(0, 1fr));
    gap: var(--s1);
  }

  .mx-col,
  .mx-row,
  .mhead,
  .mrow-l {
    font-size: var(--t-meta);
    letter-spacing: 0;
  }

  .mx-col small,
  .mx-row small {
    display: none;
  }

  .mx-cell {
    min-width: 0;
    min-height: auto;
    padding: var(--s2);
  }

  .mx-cell .cval {
    font-size: var(--t-body);
  }

  .matrix-frame {
    grid-template-columns: minmax(28px, auto) repeat(3, minmax(0, 1fr));
    gap: var(--s1);
  }

  .mhead,
  .mrow-l {
    padding: var(--s1);
  }

  .mcell {
    min-width: 0;
    min-height: 0;
    padding: var(--s2);
    border-radius: var(--r-sm);
  }

  .mcell .mc-code,
  .mcell .mc-money,
  .mcell .mc-n {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .reco {
    flex-direction: column;
    padding: var(--s4);
  }

  .feedlink {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s4);
  }

  .feedlink__cue {
    margin-left: 0;
    white-space: normal;
  }

  .fitem {
    grid-template-columns: minmax(38px, auto) minmax(0, 1fr);
    gap: var(--s3);
  }

  .f-code,
  .p-code,
  .state,
  .abc,
  .skew,
  .hid-mark,
  .mag,
  .pill {
    white-space: normal;
  }

  .tbl th,
  .tbl td {
    padding: var(--s2) var(--s3);
  }

  .ritem {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .ritem .rtime,
  .src-del {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    white-space: normal;
  }

  .profile .edit {
    margin-left: 0;
  }

  .panel-body,
  .panel-head,
  .panel-foot {
    padding-left: var(--s4);
    padding-right: var(--s4);
  }

  .footer-nav,
  .foot {
    align-items: flex-start;
    gap: var(--s3);
  }

  .foot-sig {
    order: 3;
    width: 100%;
  }
}