/* Phones and small tablets (2026-11-04). Loaded last, after every other workspace sheet, so these
   rules only refine layouts that were drawn for wider screens. Desktop layouts are untouched. */

/* ---------- Topbar ---------- */
/* The sign-in text button is transparent, so its glass blur showed as a grey box over the bar. */
.topbar .ac-top-in{-webkit-backdrop-filter:none;backdrop-filter:none}

/* While the sidebar is a drawer, the topbar carries the logo so the page says whose it is.
   The row keeps its width (flex:none) so the fit pass in glass.js sees when the controls run out of
   room; its steps then drop the mark (tb-lean) and finally the logo (tb-min) before anything overlaps. */
.top-brand{display:none;align-items:center;min-height:44px;padding:0 4px;color:inherit;text-decoration:none;flex:none}
.top-brand:hover{text-decoration:none}
.top-brand .ji-logo{font-size:20px}
@media (max-width:960px){
  .topbar .top-brand{display:inline-flex}
  .topbar>.row{flex:none;gap:2px}
  .topbar.tb-lean .top-brand .ji-mark{display:none}
  .topbar.tb-min .top-brand{display:none}
  /* The logo stands for the workspace (2026-11-06): the trail drops its "Workspace ›" root and starts after a
     thin rule, so the page name no longer runs into the logo or the controls. Personal pages keep their parents. */
  .topbar .breadcrumb>span:not(.crumb-parent),.topbar .breadcrumb>span:not(.crumb-parent)+svg{display:none}
  .topbar .top-brand+.breadcrumb{margin-left:8px;padding-left:12px;border-left:1px solid var(--line)}
}
@media (max-width:650px){
  .topbar .top-controls{gap:2px}
  .topbar .top-brand{padding:0 2px}
  .topbar .top-brand .ji-logo{font-size:18px}
  .topbar .ac-top-in{padding:0 8px;font-size:13px;font-weight:600}
  .topbar .g-cta{padding:0 10px;font-size:13px}
  .topbar .lang-button,.topbar .jg-theme-toggle{width:36px;min-width:36px}
}
@media (max-width:360px){
  .topbar .ac-top-in{padding:0 6px}
  .topbar .g-cta{padding:0 8px}
  .topbar .lang-button,.topbar .jg-theme-toggle{width:34px;min-width:34px}
}

/* ---------- Headings in Chinese ---------- */
/* Break Chinese headings at punctuation, never inside a word (商标, 时候); long runs still wrap. */
:lang(zh) h1,:lang(zh) h2,:lang(zh) h3{word-break:keep-all;overflow-wrap:anywhere}
/* Form and visa codes in page titles stay whole (app.js keepCodes), and a title's action keeps its one line. */
.nobr{white-space:nowrap}
.page-heading .btn{white-space:nowrap}

/* ---------- Workspace home ---------- */
@media (max-width:560px){
  /* All features: two compact columns instead of a stack of tall, mostly empty cards. */
  .wh-bento{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wh-card{min-height:0;gap:6px;padding:14px 14px 16px}
  .wh-card.big,.wh-card.big:first-child{grid-column:1/-1}
  .wh-card b{font-size:15px}
  .wh-card.big b{font-size:19px}
  .wh-all-head{margin-bottom:12px}
  /* My Status card: the action follows the three steps without a blank band above it. */
  .wh-card-status .ms-mini{padding-block:0;margin-bottom:0}
  .wh-card-status>.btn{align-self:flex-start;margin-top:4px}
}

/* ---------- Key figures (flow overview, insights) ---------- */
@media (max-width:650px){
  /* The card body already insets its content; the figures don't add a second inset. */
  .card-body>.ins-kpis,.card>.ins-kpis{padding:0}
  .ins-kpis,.ins-kpis.three{column-gap:16px;row-gap:0}
  .ins-kpis>div{margin-right:0;padding:12px 0;border-right:0!important;border-bottom:0!important;border-top:1px solid var(--line);min-width:0}
  .ins-kpis>div:nth-child(-n+2){border-top:0}
  .ins-kpis .number{overflow-wrap:anywhere}
  .ins-kpis .badge{white-space:normal;text-align:left}
}

/* ---------- Tablets (2026-11-06) ---------- */
/* My Status on the workspace home spans the row below 1100px, so nothing stretches it: the action follows the
   three steps without the blank band the desktop's taller card leaves. */
@media (max-width:1099px){
  .wh-card-status .ms-mini{margin-bottom:0}
  .wh-card-status>.btn{margin-top:4px}
}
/* Key figures two to a row (app.css, 1180px and below): each column pads toward the middle instead of keeping a
   right margin, so the rule between the columns and the rule between the rows meet in a cross. Three to a row
   stays one row, so it carries no rule beneath. */
@media (min-width:651px) and (max-width:1180px){
  .ins-kpis:not(.three)>div{margin-right:0;padding:12px 18px 12px 0}
  .ins-kpis:not(.three)>div:nth-child(2n){padding:12px 0 12px 18px}
  .kpis.three>div{border-bottom:0!important}
}
/* The side rail drops under the page two to a row with its last card across; with an even number of cards that
   left one card alone beside an empty column. */
@media (max-width:920px){
  .rail>div:last-child:nth-child(even){grid-column:auto}
}
/* H-4 and other checklists: the situation questions wrap under their text, with taller answers to tap. */
@media (max-width:640px){.wf-ask-row{flex-wrap:wrap}.wf-ask-row .chip{min-height:40px}}

/* ---------- PERM recruitment dates (perm-tool.js) ---------- */
@media (max-width:650px){
  /* Each additional step: the kind on its own row, its two dates side by side below. */
  .pm-extra{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pm-extra>.field:first-child{grid-column:1/-1}
  .pm-window{gap:12px}
  .pm-window b{font-size:17px;white-space:nowrap}
  .pm-dates>li{column-gap:14px}
}
@media (max-width:380px){
  /* Too narrow for the two filing dates side by side: one under the other. */
  .pm-window{grid-template-columns:minmax(0,1fr)}
}

/* ---------- PERM cases (perm-desk.js, internal edition) ---------- */
@media (max-width:650px){
  /* The list: one block per case, the name across the top, stage and next date below, Open at the top right. */
  .pc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pc-table table,.pc-table tbody{display:block;min-width:0;width:100%}
  .pc-table tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"who who act" "stage when when";gap:12px 14px;padding:14px 16px}
  .pc-table tr+tr{border-top:1px solid var(--line)}
  .pc-table td{display:block;padding:0;border:0;min-width:0;background:none}
  .pc-table td:nth-child(1){grid-area:who}
  .pc-table td:nth-child(2){grid-area:stage}
  .pc-table td:nth-child(3){grid-area:when}
  .pc-table td:nth-child(4){grid-area:act;align-self:start}
  .pc-foot{align-items:flex-start;flex-direction:column}
}
@media (max-width:560px){
  .pc-grid{grid-template-columns:minmax(0,1fr)}
  .pc-sheet>div{grid-template-columns:minmax(0,1fr);gap:2px}
  .pc-keydates .ow-dates>li{grid-template-columns:minmax(0,9.5em) minmax(0,1fr)}
  .pc-mail>div{grid-template-columns:48px minmax(0,1fr);gap:10px}
  .pc-draft-acts .gd-check{margin-left:0;flex-basis:100%}
  .pc .pc-issues li{flex-wrap:wrap}
}

/* A flow step's "where and how": label above its rule on a phone */
@media (max-width:650px){
  .wf-how-list{grid-template-columns:minmax(0,1fr)}
  .wf-how-list dd{border-top:0;padding-top:0}
}

/* Case page on a phone: the stage bars stay, their names go to screen readers only (the step line above names
   the current one); each track wraps its status under its name. */
@media (max-width:760px){
  .cs-stages{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;margin-bottom:18px}
  .cs-stages li{height:4px;padding:0}
  .cs-stages li>span,.cs-stages li>small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cs-now{padding:18px 16px}
  .cs-now h2{font-size:20px}
  .cs-gate{padding:18px 16px}
  .cs-tracks{display:block}
  .cs-tracks li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px}
  .cs-tracks li>b{grid-column:1;grid-row:1}
  .cs-tracks li>.cs-v{grid-column:1/-1;grid-row:2}
  .cs-tracks li>.text-link{grid-column:2;grid-row:1}
}

/* Sign-up sheet on phones: a bottom sheet across the full width, above the home indicator (glass/account.css). */
@media (max-width:650px){
  dialog.ac-sheet{inset:auto 0 0;width:100%;max-width:none;max-height:calc(100dvh - 24px);border-radius:var(--radius-dialog) var(--radius-dialog) 0 0;border-bottom:0}
  .ac-sheet-in{padding:22px 16px calc(20px + env(safe-area-inset-bottom))}
  .ac-sheet-x{top:10px;right:8px}
}
@media (max-width:650px){
  .vt-card{padding:18px 16px}
  .vt-row{flex-wrap:wrap;row-gap:4px}
  .vt-actions .btn{flex:1 1 100%;min-height:44px}
}