/* teqniq timesheet portal. Mission Control tokens, copied from the site theme so
   the portal reads as the same product. White and grey are the page; blue only
   ever means something is live, i.e. waiting on someone. */

:root{
  --void:#050607; --deck:#0B0C0E; --steel:#15161A;
  --hair:rgba(237,237,238,0.13); --hair-soft:rgba(237,237,238,0.06);
  --ice:#EDEDEE; --slate:#96979A; --dim:#7C7E82;
  --signal:#FFFFFF; --grey:#8F8F8F;
  --bad:#E4796B; --live:#3D82E8; --live-dim:rgba(61,130,232,0.22);
  --gut:clamp(1rem,4vw,2rem);
  --display:"Barlow Condensed","Oswald",Impact,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.72,.24,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--void); color:var(--ice);
  font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
a{ color:inherit; }
img,svg{ max-width:100%; }
:focus-visible{ outline:2px solid var(--live); outline-offset:3px; }
.tp-skip{ position:absolute; left:-999px; top:0; background:#fff; color:#050607; padding:.6rem 1rem; z-index:100; }
.tp-skip:focus{ left:0; }

/* logo, from the brand snippet */
.tq-logo{ --tq-h:26px; display:inline-flex; align-items:center; gap:calc(var(--tq-h)*0.45); color:#fff; text-decoration:none; }
.tq-trace{ height:calc(var(--tq-h)*1.15); width:calc(var(--tq-h)*1.15*1.733); flex:none; overflow:visible; }
.tq-trace .track{ fill:none; stroke:currentColor; stroke-width:4; opacity:.2; }
.tq-trace .tail,.tq-trace .head{ fill:none; stroke:currentColor; stroke-linecap:butt; animation:tq-sweep 3s linear infinite; }
.tq-trace .tail{ stroke-width:7; opacity:.35; stroke-dasharray:16 100; }
.tq-trace .head{ stroke-width:9; stroke-dasharray:5 111; animation-delay:.09s; }
.tq-word{ height:var(--tq-h); width:auto; display:block; }
@keyframes tq-sweep{ to{ stroke-dashoffset:-116; } }
@media (prefers-reduced-motion:reduce){
  .tq-trace .tail,.tq-trace .head{ animation:none; stroke-dasharray:none; opacity:1; }
  .tq-trace .tail{ display:none; }
  .tq-trace .head{ stroke-width:7; }
  .tq-trace .track{ display:none; }
}

/* app bar and nav */
.tp-bar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:calc(.75rem + env(safe-area-inset-top)) var(--gut) .75rem;
  background:rgba(5,6,7,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair);
}
.tp-who{ display:flex; align-items:center; gap:.9rem; min-width:0; }
.tp-who__n{ font:500 .72rem/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:11rem; }
@media (max-width:480px){ .tp-who__n{ display:none; } }
.tp-inline{ display:inline; margin:0; }
.tp-link{ white-space:nowrap; background:none; border:0; padding:.5rem 0; color:var(--ice); font:inherit; font-family:var(--display); text-transform:uppercase; letter-spacing:.06em; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.tp-nav{ display:flex; gap:1.6rem; padding:0 var(--gut); border-bottom:1px solid var(--hair); overflow-x:auto; }
.tp-nav a{ font-family:var(--display); text-transform:uppercase; letter-spacing:.08em; font-size:1.05rem; text-decoration:none; color:var(--slate); padding:.85rem 0 .7rem; border-bottom:2px solid transparent; white-space:nowrap; }
.tp-nav a[aria-current]{ color:var(--signal); border-bottom-color:var(--signal); }

.tp-main{ flex:1; width:100%; max-width:60rem; margin:0 auto; padding:1.6rem var(--gut) 3rem; }
.tp-foot{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:center; padding:1.4rem var(--gut) calc(1.4rem + env(safe-area-inset-bottom)); border-top:1px solid var(--hair-soft); font:400 .72rem/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); }
.tp-foot a{ color:var(--dim); }

/* type */
h1,h2,h3{ font-family:var(--display); text-transform:uppercase; font-weight:400; letter-spacing:.02em; margin:0; }
h1{ font-size:clamp(2.2rem,8vw,3.2rem); line-height:1; margin:.2rem 0 .5rem; }
h2{ font-size:1.6rem; line-height:1.1; }
.tp-sub{ font-size:1.15rem; margin:1.6rem 0 .6rem; color:var(--slate); letter-spacing:.08em; }
.tp-label{ margin:0; font:500 .72rem/1.2 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.tp-mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tp-dim{ color:var(--slate); margin:.1rem 0; }
.tp-small{ font-size:.9rem; }
p{ margin:.6rem 0; }
.tp-back{ margin:0 0 .8rem; font-size:.9rem; }
.tp-back a{ color:var(--slate); text-decoration:none; }
.tp-back a:hover{ color:var(--signal); }

/* cards and notes */
.tp-card{ background:var(--deck); border:1px solid var(--hair); padding:1.25rem; margin:1.1rem 0; }
.tp-card--narrow{ max-width:26rem; margin:2rem auto; }
.tp-card__head{ display:flex; justify-content:space-between; gap:1rem; }
.tp-week{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem 0; margin:.9rem 0 .4rem; border-top:1px solid var(--hair-soft); border-bottom:1px solid var(--hair-soft); }
.tp-note{ padding:.85rem 1rem; margin:0 0 1.2rem; border:1px solid var(--hair); background:var(--steel); font-size:.95rem; }
.tp-note--ok{ border-color:var(--live); }
.tp-note--err{ border-color:var(--bad); }

/* status chips. Blue only where something is waiting on a person. */
.tp-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.28rem .6rem; border:1px solid var(--hair); font:500 .7rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--slate); white-space:nowrap; }
.tp-chip--with_client,.tp-chip--with_teqniq{ color:var(--ice); border-color:var(--live-dim); }
.tp-chip--with_client::before,.tp-chip--with_teqniq::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--live); animation:tp-pulse 2.6s ease-in-out infinite; }
@keyframes tp-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.tp-chip--approved{ color:var(--signal); border-color:var(--signal); }
.tp-chip--approved::before{ content:"\2713"; }
.tp-chip--queried{ color:var(--bad); border-color:var(--bad); }
.tp-chip--missing{ border-style:dashed; color:var(--dim); }
@media (prefers-reduced-motion:reduce){ .tp-chip--with_client::before,.tp-chip--with_teqniq::before{ animation:none; } }

/* buttons */
.tp-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.7rem 1.6rem;
  background:var(--signal); color:var(--void); border:1px solid var(--signal); cursor:pointer;
  font:400 1.1rem/1 var(--display); text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.tp-btn:hover{ background:transparent; color:var(--signal); }
.tp-btn--ghost{ background:transparent; color:var(--signal); border-color:var(--hair); }
.tp-btn--ghost:hover{ border-color:var(--signal); }
.tp-btn--sm{ min-height:40px; padding:.5rem 1.1rem; font-size:1rem; }
.tp-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin:1.2rem 0; }

/* forms */
.tp-field{ display:block; margin:1rem 0; }
.tp-field>span{ display:block; margin-bottom:.4rem; font:500 .72rem/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--slate); }
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%; min-height:48px; padding:.7rem .85rem;
  background:var(--steel); color:var(--ice); border:1px solid var(--hair); border-radius:0;
  font:16px/1.4 var(--body); -webkit-appearance:none; appearance:none;
}
select{ background-image:linear-gradient(45deg,transparent 50%,var(--slate) 50%),linear-gradient(135deg,var(--slate) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.4rem; }
textarea{ resize:vertical; }
input:disabled,textarea:disabled{ opacity:.65; }
.tp-check{ display:flex; gap:.7rem; align-items:flex-start; margin:1rem 0; cursor:pointer; color:var(--slate); font-size:.95rem; }
input[type=checkbox]{ width:22px; height:22px; flex:none; margin:0; accent-color:#fff; }

/* the hours form */
.tp-days{ margin:1.4rem 0 0; border-top:1px solid var(--hair); }
.tp-day{ display:grid; grid-template-columns:1fr 7.5rem; align-items:center; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--hair-soft); }
.tp-day__head{ display:flex; flex-direction:column; }
.tp-day__fields{ display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; }
.tp-qty{ display:flex; align-items:center; justify-content:flex-end; gap:.7rem; width:100%; }
.tp-qty label{ flex:1; text-align:right; cursor:pointer; font:500 .7rem/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--slate); }
.tp-qty label em{ font-style:normal; color:var(--dim); }
.tp-qty input{ width:7.5rem; flex:none; }
.tp-day--multi{ align-items:start; padding:.8rem 0; }
.tp-exp{ display:grid; grid-template-columns:7.5rem 1fr; gap:.6rem; }
.screen-reader-text{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tp-day__n{ font:400 1.35rem/1.1 var(--display); text-transform:uppercase; letter-spacing:.06em; }
.tp-day__d{ font:400 .72rem/1.3 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.tp-hours,.tp-mil{ font-family:var(--mono); font-size:1.25rem; text-align:right; }
.tp-mil{ max-width:9rem; text-align:right; }
.tp-total{ display:flex; justify-content:space-between; align-items:baseline; padding:1rem 0; border-bottom:1px solid var(--hair); }
.tp-total span{ font:500 .72rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--slate); }
.tp-total strong{ font-size:2rem; font-weight:500; }

/* tables, which fold into stacked cards on a phone */
.tp-table{ width:100%; border-collapse:collapse; margin:.4rem 0; }
.tp-table th{ text-align:left; font:500 .7rem/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:.6rem .5rem; border-bottom:1px solid var(--hair); }
.tp-table td{ padding:.75rem .5rem; border-bottom:1px solid var(--hair-soft); vertical-align:middle; }
.tp-table a{ color:var(--signal); }
.tp-table--days{ max-width:36rem; }
.tp-table--days thead th:not(:first-child),.tp-table--days td:not(:first-child){ text-align:right; }
.tp-table--days .tp-sum td{ border-top:1px solid var(--hair); font-weight:600; }
@media (max-width:600px){
  .tp-table:not(.tp-table--days) thead{ position:absolute; left:-999px; }
  .tp-table:not(.tp-table--days) tr{ display:block; padding:.6rem 0; border-bottom:1px solid var(--hair); }
  .tp-table:not(.tp-table--days) td{ display:flex; justify-content:space-between; gap:1rem; border:0; padding:.25rem .2rem; }
  .tp-table:not(.tp-table--days) td[data-l]::before{ content:attr(data-l); font:500 .68rem/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
}

/* client approval list */
.tp-bulkbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1rem 0 .4rem; }
.tp-bulkbar .tp-check{ margin:0; }
.tp-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.tp-item{ display:grid; grid-template-columns:auto 1fr auto; gap:.6rem 1rem; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--hair-soft); }
.tp-item__tick{ display:flex; padding:.4rem; margin:-.4rem; cursor:pointer; }
.tp-item__body{ display:flex; flex-direction:column; text-decoration:none; min-width:0; }
.tp-item__body strong{ font:400 1.3rem/1.1 var(--display); text-transform:uppercase; letter-spacing:.04em; }
.tp-item__body span{ font-size:.88rem; }
.tp-item__hrs{ font-size:1.15rem; text-align:right; white-space:nowrap; }
.tp-item__hrs small{ display:block; font:400 .65rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.tp-filter{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:flex-end; margin:1rem 0; }
.tp-filter .tp-field{ margin:0; min-width:11rem; flex:1; }
.tp-pager{ display:flex; gap:1rem; align-items:center; justify-content:center; margin:1.4rem 0; }
.tp-query{ margin:1.4rem 0; border:1px solid var(--hair); padding:.2rem 1rem; }
.tp-query summary{ cursor:pointer; padding:.8rem 0; color:var(--slate); }

/* install prompt */
.tp-install{ position:fixed; left:0; right:0; bottom:0; z-index:30; padding:1rem var(--gut) calc(1rem + env(safe-area-inset-bottom)); background:var(--steel); border-top:1px solid var(--live); display:flex; gap:1rem; align-items:center; justify-content:space-between; font-size:.92rem; }
.tp-install[hidden]{ display:none; }
.tp-install p{ margin:0; }
.tp-install .tp-btn{ min-height:40px; padding:.4rem 1rem; }
.tp-install .tp-link{ color:var(--slate); }

@media (min-width:700px){
  .tp-day{ grid-template-columns:1fr 9rem; }
  .tp-card{ padding:1.6rem; }
}