/* © 2026 Job Shift Careers. Phone layout (item 24, 30 Oct 2026): see js/phone.js.
   Everything inside the media query applies only up to 760 px wide; wider screens look exactly as before. */

/* every screen size: Job Finder tabs (Banks & Insurance is its own tab) and the folded-list helper */
.jf-off{display:none!important}
.jb-tabd{margin:-2px 2px 0}
.bf-off{display:inline-block;padding:8px 14px;border-radius:999px;border:1px dashed var(--line);color:var(--mute);font-weight:600;font-size:calc(.88rem*var(--ts,1));cursor:not-allowed;opacity:.7}
.ph-hide:not(.ph-show){display:none!important}
.rmo{justify-content:flex-start}
/* Job Finder's selected tab in the same blue as the main tabs (Imran, 30 Oct 21:36; every screen size) */
.subtabs a[aria-current="true"]{color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2))}

@media (max-width:760px){
  /* folds */
  details.ph-f>summary{list-style:none;cursor:pointer}
  details.ph-f>summary::-webkit-details-marker{display:none}
  details.ph-f:not(.card)>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font-weight:700}
  details.ph-f:not(.card)>summary::after{content:"";flex:none;width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);opacity:.55;transition:transform .2s;margin-right:4px}
  details.ph-f:not(.card)[open]>summary::after{transform:rotate(45deg)}
  details.ph-f>summary>span{display:grid;gap:2px;min-width:0}
  details.ph-f>summary small.note{font-weight:400;font-size:calc(.82rem*var(--ts,1));line-height:1.35}
  details.ph-f>.ph-b{display:grid;gap:12px;min-width:0}
  details.ph-f.in-card{border-top:1px solid var(--line);padding-top:4px}
  details.ph-f.in-card[open]>summary{margin-bottom:6px}
  .flds>details.ph-f{grid-column:1/-1}
  details.ph-f.in-film{border-top:1px solid var(--filmLine)}
  details.ph-f.in-film>summary{color:var(--filmInk);font-size:calc(.9rem*var(--ts,1));min-height:44px}
  details.ph-card>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:2px;min-height:44px}
  details.ph-card>summary::after{grid-column:2;grid-row:1}
  details.ph-card>summary h2{margin:0;font-size:calc(1.15rem*var(--ts,1));grid-column:1;grid-row:1}
  details.ph-card>summary .step{margin:0;grid-column:1;grid-row:1}
  details.ph-card>summary small.note{grid-column:1/-1}
  details.ph-card:not([open])>summary{margin-bottom:0}

  /* How it works: one tap (open on the first visit to each tool) */
  details.intro.ph-intro{padding:0 14px}
  details.intro.ph-intro>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;min-height:48px}
  details.intro.ph-intro>summary::-webkit-details-marker{display:none}
  details.intro.ph-intro>summary::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg);opacity:.55;transition:transform .2s;margin-right:4px}
  details.intro.ph-intro[open]>summary::after{transform:rotate(45deg)}
  details.intro.ph-intro>.ph-b{display:grid;gap:6px;padding-bottom:12px}

  /* Ask Genie keeps today's lamp + "Ask Genie" pill; pages get room at the bottom so it doesn't sit on the last lines */
  .view{padding-bottom:84px}

  /* Home: the 6 tool cards stay 2 per row (today's look); quick tools and Chai Break as one row each */
  .ph-quick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
  .ph-quick .ph-ct{display:grid;gap:2px;min-width:0}
  .ph-quick .ph-ct b{font-family:var(--fd);font-size:calc(1.05rem*var(--ts,1))}
  .ph-quick .ph-go{font-size:calc(1.5rem*var(--ts,1));color:var(--mute)}
  .ph-chai{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;text-decoration:none;color:var(--ink)}
  .ph-chai .ph-ci{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,201,60,.18);color:#C27C0E}
  .ph-chai .ph-ci svg{width:22px;height:22px}
  .ph-chai .ph-ct{display:grid;gap:2px;min-width:0}
  .ph-chai .ph-ct b{font-family:var(--fd);font-size:calc(1.05rem*var(--ts,1))}
  .ph-chai .ph-go{font-size:calc(1.5rem*var(--ts,1));color:var(--mute)}

  /* Offer X-Ray: the X-ray right after the upload, then Please check, Fine-tune and Ask HR, the lines,
     then current pay with the comparison right under it */
  .ph-ox .o1{order:1}
  .ph-ox #o-res{order:2}
  .ph-ox .ph-fl{order:3}
  .ph-ox .ph-fl:empty{display:none}
  .ph-ox #o-more{order:4}
  .ph-ox #ph-lines.filled{order:5}
  .ph-ox #o-cur{order:6}
  .ph-ox #o-cmp{order:7}
  .ph-style{margin:6px 0 0;font-size:calc(1.05rem*var(--ts,1))}
  #rb-ai>.ph-s4{margin:0}
  .ph-next{display:grid;gap:10px}
  .ph-next .ph-step{margin:0;display:grid;gap:2px;padding:14px 16px;border:1px dashed var(--line);border-radius:16px;color:var(--mute)}
  .ph-next .ph-step b{color:var(--ink);font-family:var(--fd);font-size:calc(1.02rem*var(--ts,1))}
  .ph-ox #ph-lines.filled{border:1px solid var(--line);border-radius:20px;padding:4px 16px 16px;background:linear-gradient(180deg,var(--card2),var(--card))}
  .ph-ql{gap:18px}
  .ph-ql[hidden]{display:none}
  /* the lines as a compact list: the name and amount read like text, how it's paid is a small tag */
  .ph-ox .lns{gap:8px}
  .ph-ox .lns .line{padding:8px 10px;gap:4px;border-radius:12px}
  .ph-ox .lns .lr3{grid-template-columns:minmax(0,1fr) 104px 24px;grid-template-areas:"n a x" "c c .";row-gap:4px}
  .ph-ox .lns .lr3 input{border-color:transparent;background:transparent;padding:6px 4px;font-weight:600}
  .ph-ox .lns .lr3 input:focus{border-color:var(--line);background:var(--bg2)}
  .ph-ox .lns .lr3 select{justify-self:start;width:auto;max-width:100%;padding:3px 26px 3px 10px;border-radius:999px;font-size:calc(.78rem*var(--ts,1));font-weight:700;min-height:30px;border-color:var(--c,var(--line));background-color:transparent}
  .ph-ox .lns .lnote{font-size:calc(.8rem*var(--ts,1));padding-left:4px}
  .ph-more{justify-self:start}

  /* Job Finder: the tab row scrolls sideways; one section at a time */
  .subtabs{margin:0}
  details.ph-grp{border-top:1px solid var(--line)}
  details.ph-grp>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:48px;font-weight:700}
  details.ph-grp>summary::-webkit-details-marker{display:none}
  details.ph-grp[open]>summary{margin-bottom:6px}
}