@media (max-width:1040px){
  .assign-table,
  .assign-table tbody,
  .assign-table tr,
  .assign-table td{display:block;width:auto!important}
  .assign-table thead{display:none}
  .assign-table tbody tr{
    padding:14px 15px;border-top:1px solid rgba(255,255,255,.09);
  }
  .assign-table tbody tr:first-child{border-top:0}
  .assign-table tbody tr:nth-child(even) td,
  .assign-table tbody tr:hover td{background:none}
  .assign-table tbody tr:nth-child(even){background:rgba(255,255,255,.022)}
  .assign-table td{
    display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
    padding:5px 0;border:0;text-align:right;
  }
  /* the label comes from the cell itself, so the markup stays a real table */
  .assign-table td::before{
    content:attr(data-label);flex:none;text-align:left;
    font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:var(--wk-white-60);padding-top:2px;
  }
  .assign-table td:not([data-label]){justify-content:flex-end;padding-top:8px}
  .work-table td.work-name,.month-table td.work-name{font-size:15px;padding-bottom:8px}
  .work-table td.work-name::before,.month-table td.work-name::before{content:none}
  .work-table td.work-name,.month-table td.work-name{justify-content:flex-start;text-align:left}
}
/* "2/6" beside a grouped row's task list - how much of the thread is done */
.thread-count{font-size:10px;font-weight:700;color:var(--wk-white-60);letter-spacing:.04em;white-space:nowrap}

/* ---------- today's work ---------- */
.work-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.work-sum{font-family:var(--wk);font-size:12px;color:var(--wk-white-60);margin:0;letter-spacing:.02em}
.work-sum b{color:var(--wk-white);font-weight:600}
.work-none{
  font-family:var(--wk);font-size:13px;color:var(--wk-white-60);
  margin:0 0 18px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12);
}
.work-name{font-weight:600}
.work-net{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Stores and tasks are the two columns that hold several values each. As
   chips they wrap into a taller row and stay readable, where comma-joined
   text just ran the table off the side of the page. */
.work-chip,.work-task{
  display:inline-flex;align-items:baseline;gap:5px;margin:2px 5px 2px 0;
  padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.1);
  font-size:11px;color:var(--wk-white-70);white-space:nowrap;max-width:100%;
}
.work-chip{overflow:hidden;text-overflow:ellipsis;display:inline-block}
.work-task b{color:var(--wk-white);font-weight:600;font-variant-numeric:tabular-nums}
.work-status{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.work-status.is-active{background:var(--wk-green);color:#08210a}
.work-status.is-break{background:rgba(255,255,255,.24);color:#fff}
.work-status.is-done{background:rgba(255,255,255,.12);color:var(--wk-white-70)}
.work-status.is-idle{background:rgba(238,195,90,.16);color:#eec35a}

/* the name cell holds a flex row, so the tds' top alignment would float the
   short numeric cells; center the whole row on the avatar instead */
.month-table td{vertical-align:middle}
.assign-del{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:none;color:var(--wk-white-60);opacity:.45;
  transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.assign-del svg{width:15px;height:15px}
.assign-table tr:hover .assign-del,.tlog-item:hover .assign-del{opacity:1}
.assign-del:hover,.assign-del:focus-visible{background:rgba(224,72,60,.18);color:#ff8a7e;opacity:1}
/* the pending-approval list isn't a hoverable table row, and this doubles
   as the only way to reach it on a touch admin - no hover-to-reveal here */
#teamPending .assign-del{opacity:.7}
/* edit sits beside delete but is not destructive - it brightens, not reddens */
.row-acts{display:flex;gap:2px;justify-content:flex-end}
.assign-edit:hover,.assign-edit:focus-visible{background:rgba(255,255,255,.14);color:var(--wk-white)}
.assign-table tr:hover .assign-edit,.tlog-item:hover .assign-edit{opacity:1}

/* the receipt: an open thread the assignee has had on screen */
.seen-eye{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:7px;vertical-align:middle;
  color:var(--wk-white-60);
}
.seen-eye svg{width:14px;height:14px}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:rgba(15,17,23,.9);color:#fff;padding:13px 20px;border-radius:999px;
  font-family:var(--wk);letter-spacing:.06em;font-size:14px;font-weight:500;
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  opacity:0;pointer-events:none;transition:.22s ease;z-index:80;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
/* a toast carrying an action (Undo) has to accept the click it invites */
.toast.has-act{pointer-events:auto}
.toast-act{
  margin-left:14px;padding:5px 13px;border:0;border-radius:999px;cursor:pointer;
  background:var(--wk-white);color:#12131a;
  font-family:var(--wk);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.toast-act:hover{background:var(--wk-green);color:#08210a}

/* ---------- notched phones in landscape ---------- */
@media (max-width:1023.98px) and (orientation:landscape){
  .app{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* Short landscape phone: the portrait sizings stack up taller than the
   viewport, leaving the punch card a sliver. Shrink the fixed furniture
   (rings, dock, header) so the card keeps a usable share of the height. */
@media (max-width:1023.98px) and (max-height:560px) and (orientation:landscape){
  .band{padding-top:calc(env(safe-area-inset-top) + 10px);padding-bottom:4px}
  .brand-rule{margin:6px 0 8px}
  .clock{padding:0}
  .ring{max-width:104px}
  .ring-main{font-size:18px}
  .clock-label{margin-top:14px;font-size:11px;letter-spacing:.1em}
  .clock-meta{font-size:10px}
  .shiftbar{padding-top:6px;min-height:0}
  .dock{min-height:0;padding:8px 16px}
  .dock .btn{padding:13px 14px}
  .empty{padding:12px 4px 16px}
  .empty-icon{width:88px;height:88px;margin-bottom:12px}
}

/* ---------- squircle corners (superellipse, progressive enhancement) ----------
   Pills (assign-status, work-chip/-task/-status, toast, toast-act) and the
   circular .mt-avatar are left alone on purpose - see the token comment in
   base.css for why. .assign-edit shares .assign-del's box (same element,
   two classes), so one rule covers both. */
@supports (corner-shape:superellipse(1)){
  .assign-del{corner-shape:var(--squircle-sm)}
}