/* ============================================================
   Pipezoom - help.css
   The Need help tick, the manager's queue, the notification list and
   the bell that counts them.

   COLOR RULE: no literal color values. Tokens only.
   ============================================================ */

/* The tick
   It is placed under the thing it asks about. Off, it is a quiet
   outline. Because a request in flight differs from one never made, on
   it carries the accent. */
.helpq{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.helpq-btn{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:9px 14px;
  font-size:.87rem;
  font-weight:600;
  color:var(--ink);
  background:var(--surface-raised);
  transition:background .13s,border-color .13s,color .13s;
}
.helpq-btn:hover:not(:disabled){background:var(--surface-high);border-color:var(--accent);}
.helpq-btn:disabled{opacity:.6;}
.helpq-btn i{font-size:1rem;color:var(--ink-faint);}
.helpq-btn[data-on="true"]{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:var(--ink-inverse);
}
.helpq-btn[data-on="true"] i{color:var(--ink-inverse);}
/* Once on, the tick is an accent button, and its hover deepens the
   accent. */
.helpq-btn[data-on="true"]:hover:not(:disabled){
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  color:var(--ink-inverse);
}
.helpq-said{color:var(--ink-faint);font-size:.8rem;line-height:1.4;}

/* The queue, on the team page and on a rep's own page */
.helpq-list{
  display:grid;
  gap:7px;
  margin-top:14px;
}
.helpq-row{
  display:flex;align-items:center;gap:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 14px;
}
.helpq-row-ic{font-size:1rem;color:var(--accent);flex-shrink:0;}
.helpq-done .helpq-row-ic{color:var(--good-ink);}
.helpq-row-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.helpq-row-name{font-size:.92rem;font-weight:600;line-height:1.3;}
.helpq-row-note{color:var(--ink-faint);font-size:.79rem;line-height:1.35;}
.helpq-row-go{font-size:.83rem;font-weight:600;flex-shrink:0;}
.helpq-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;
  margin-left:8px;
  padding:0 7px;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.72rem;font-weight:700;
  vertical-align:middle;
}

/* Notifications */
.notes{margin-top:14px;}
.notes-top{margin-bottom:10px;}
.note{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  margin-bottom:7px;
}
/* Because a dot in a list of 20 is hard to find, unread marks the whole
   row. */
.note[data-new="true"]{border-color:var(--accent);background:var(--accent-wash);}
.note-ic{font-size:.95rem;color:var(--ink-faint);line-height:1.6;flex-shrink:0;}
.note[data-new="true"] .note-ic{color:var(--accent);}
.note-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.note-title{font-size:.92rem;font-weight:600;line-height:1.35;}
.note-body{color:var(--ink-soft);font-size:.83rem;line-height:1.45;}
.note-when{color:var(--ink-faint);font-size:.75rem;}
.note-go{font-size:.83rem;font-weight:600;flex-shrink:0;line-height:1.6;}
/* The control names in words both its action and the line's state. */
.note-mark{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-raised);
  color:var(--ink-soft);
  font-size:.78rem;font-weight:600;
  line-height:1.3;
  transition:background .13s,border-color .13s,color .13s;
}
.note-mark i{font-size:.85rem;}
.note-mark:hover:not(:disabled){background:var(--surface-hover);border-color:var(--line-strong);color:var(--ink);}
.note-mark:disabled{opacity:.55;}
.note[data-new="true"] .note-mark{border-color:var(--line-strong);color:var(--ink);}

.acct-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}

/* The bell, in the top bar
   Because the bar keeps its own background on every theme, the bell
   wears the shell palette. */
.bell{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  border-radius:var(--radius-sm);
  color:var(--shell-ink-soft);
}
.bell:hover{background:var(--shell-high);color:var(--shell-ink);text-decoration:none;}
.bell-n{
  position:absolute;
  top:2px;right:1px;
  min-width:16px;height:16px;
  padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);
  background:var(--accent-strong);
  color:var(--ink-inverse);
  font-size:.64rem;font-weight:700;
  line-height:1;
}
.bell-n[hidden]{display:none;}

@media (max-width:640px){
  .helpq{gap:9px;}
  .helpq-btn{width:100%;justify-content:center;}
  .note-go{display:none;}
  .note{flex-wrap:wrap;}
  .note-main{flex-basis:100%;}
  .helpq-row-acts{width:100%;}
}

/* The question and the answer
   Because a phase name tells a manager the page and nothing about the
   problem on it, the ask carries a question and the row carries a way
   to answer it. */
.helpq-ask{
  flex-basis:100%;
  display:flex;flex-direction:column;gap:7px;
  margin-top:2px;
}
.helpq-ask-in,
.helpq-answer-in{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:9px 11px;
  font:inherit;font-size:.87rem;line-height:1.45;
  resize:vertical;
  outline:none;
}
.helpq-ask-in:focus,
.helpq-answer-in:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-ring-soft);
}
.helpq-ask-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.helpq-ask-said{font-size:.78rem;color:var(--ink-faint);}

/* The rep's words, read on the manager's row above the buttons. */
.helpq-row-ask{
  margin-top:5px;
  padding:8px 11px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  font-size:.85rem;line-height:1.5;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.helpq-row{flex-wrap:wrap;}
/* The buttons are 1 flex item; the panel below them takes its own line. */
.helpq-row-acts{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  flex-shrink:0;
}
/* Because 4 buttons on 1 line squeeze a name onto 3 lines on a phone,
   the 2 that open a page take a full-width line each and the 2 that act
   on the request share the line under them. */
@media (max-width:640px){
  .helpq-row-acts{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  .helpq-row-acts > a{grid-column:1 / -1;}
  .helpq-row-acts > *{width:100%;justify-content:center;white-space:nowrap;}
}
/* Because flex outranks the hidden attribute, a closed panel needs this
   rule to leave the row. */
.helpq-answer[hidden]{display:none;}
.helpq-answer{
  flex-basis:100%;
  display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap;
  margin-top:4px;
  padding-top:11px;
  border-top:1px solid var(--line);
}
.helpq-answer-in{flex:1;min-width:200px;}
.helpq-answer-said{
  flex-basis:100%;
  font-size:.78rem;color:var(--ink-faint);
}

/* The manager's answer, read back by the rep beside what they asked. */
.helpq-back{
  flex-basis:100%;
  margin-top:4px;
  padding:9px 12px;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.helpq-back-k{
  display:block;
  font-size:.7rem;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:3px;
}
.helpq-back-v{
  display:block;
  font-size:.87rem;line-height:1.5;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere;
}

/* Raising one in writing
   Because the ticks cover only the phases the site knows about, this
   form reaches the same queue with a sentence: 2 answers and a press. */
.reqnew{
  display:grid;
  gap:12px;
  margin-top:14px;
  padding:16px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.reqnew-f{display:flex;flex-direction:column;gap:6px;}
.reqnew-k{font-size:.8rem;font-weight:600;color:var(--ink-soft);}
.reqnew-in{
  width:100%;
  background:var(--surface-page);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);
  padding:10px 12px;
  font:inherit;font-size:.9rem;line-height:1.45;
  outline:none;
}
.reqnew-area{resize:vertical;min-height:74px;}
.reqnew-in:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring-soft);}
.reqnew-in::placeholder{color:var(--ink-faint);}
.reqnew-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.reqnew-said{font-size:.8rem;color:var(--ink-faint);}

/* A request the reader owns
   Because a row in a list of 20 is found by its background, unread
   marks the whole row, the same as a notification. */
.helpq-row[data-new="true"]{border-color:var(--accent);background:var(--accent-wash);}
.helpq-row[data-new="true"] .helpq-row-ic{color:var(--accent);}
.helpq-row .helpq-back{margin-top:6px;}
.helpq-row .note-mark{align-self:center;}

/* The reads, questions and writes of 1 refine check
   1 section a check, under the anchor that check's entry names, for a
   card on the Refine pane to link to. The tag row holds the 2 facts a
   rep wants before pressing: the service it asks, and whether pressing
   spends money. */
.helpc{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.helpc:first-of-type{border-top:0;padding-top:0;}
.helpc-t{margin:0 0 8px;font-size:1rem;font-weight:600;line-height:1.3;}
.helpc-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;}
.helpc-tag{
  display:inline-block;
  background:var(--surface-high);
  border:1px solid var(--line);
  border-radius:999px;
  padding:2px 10px;
  font-size:.75rem;
  color:var(--ink-soft);
  white-space:nowrap;
}
.helpc-b{margin:0;font-size:.86rem;line-height:1.55;color:var(--ink-soft);}