/* ============================================================================
   F06  JOB CARDS: THE ADDRESS, HOLDS WITH A REASON, AND THE PHONE
   Tokens only, from app.css, so both themes work without a second set of
   colours. Everything for the phone sits in the media blocks at the end, at
   the widths app.css already folds at (900px: the menu moves to the bottom;
   700px: the header and the board stack).
   ============================================================================ */

/* ------------------------------------------------------------ the address
   Lifted up under the card's title by the Jobs page hook, so it sits where
   Adam reads the job's name and order number. */
.tk .f06-addr{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin:-2px 0 7px;
  font-size:11.5px;line-height:1.35;color:var(--ink-2)}
.tk .f06-grp{font-size:9.5px;padding:0 5px}

/* --------------------------------------------------------------- the hold
   Amber, like a park that has come back, because it means the same thing to
   the eye: this job is not moving. Due or overdue goes red. */
.tk.f06-held{border-color:var(--warn)}
.tk.f06-held.f06-due{border-color:var(--crit)}
.tk .f06-hold{font-size:11px;font-weight:600;line-height:1.4;color:var(--warn)}
.tk .f06-hold.due{color:var(--crit)}

.f06-hold-box .f06-hold-note{display:block;margin-top:6px;color:var(--ink)}
.f06-hold-box .f06-hold-by{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-3)}
.f06-hold-btns{margin:-4px 0 14px}

.f06-why{margin:0 0 14px}
.f06-park{margin:0 0 12px}
.f06-park .lnk{margin-left:4px;font-weight:600}

.f06-holds li small{display:block;color:var(--ink-3)}

/* ----------------------------------------------------------- Jobs toolbar */
.f06-heldseg button.on{background:var(--warn);color:var(--ground)}

/* ---------------------------------------------- the figures, folded on a phone
   On a computer the fold is always open and its heading is hidden, so the
   screen is exactly as it was. */
details.f06-figs > summary{display:none}
details.f06-figs{display:block}

@media(max-width:900px){
  /* THE PHONE MENU. Screens named in phone.hide_screens leave the bar along the
     bottom, unless it is the screen you are on. */
  #nav .navi.f06-phone-off:not(.on){display:none}

  /* THE COMMENT BUTTON. It floated over the filter chips and the cards on
     every screen. On a phone it is a round icon in the corner above the menu,
     with its word kept for screen readers, and the page can scroll past it. */
  .cmt-fab{right:12px;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%}
  .cmt-fab .cmt-lab{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmt-fab .cmt-count{position:absolute;top:-4px;right:-4px}
  .views{padding-bottom:calc(132px + env(safe-area-inset-bottom))}
}

@media(max-width:700px){
  /* EXPORT is a computer job. On a phone it took the best spot in the header. */
  #exportBtn{display:none!important}

  details.f06-figs > summary{
    display:flex;align-items:center;justify-content:space-between;min-height:44px;
    padding:0 14px;margin:0 0 4px;cursor:pointer;list-style:none;
    background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);
    font-size:12.5px;font-weight:600;color:var(--ink-2)
  }
  details.f06-figs > summary::-webkit-details-marker{display:none}
  details.f06-figs > summary::after{content:"Show";font-size:11px;font-weight:600;color:var(--ink-3)}
  details.f06-figs[open] > summary::after{content:"Hide"}
  details.f06-figs[open] > .grid{margin-top:10px}

  .tk .f06-addr{font-size:12px}
  .f06-heldseg{flex:0 0 auto}
}