/* ============================================================
   GP Team Hub - 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 sits under the thing it is about, so what a rep is asking about is
   never in doubt. Off it is a quiet outline; on it carries the accent,
   because a request that is in flight should look different from one
   that was never made. */
.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 it is on the tick is an accent button, so hovering it deepens
   the accent instead of falling back to the off state's grey, which on
   a light theme left inverse text on a pale surface. */
.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;
}
/* Unread reads as unread through the whole row rather than through one
   dot, because a dot in a list of twenty is a dot nobody finds. */
.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;}
/* A tick on its own said neither what it would do nor what state the
   line was in, so the control carries both in words. */
.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 ----
   It wears the shell palette because the bar keeps its own surface on
   every theme. */
.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 ----
   A phase name told a manager which page to open and nothing about
   what went wrong on it, so 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);}

/* What the rep wrote, 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 one flex item, so the panel below them lands on its
   own line instead of splitting the row in half and carrying whatever
   came after it down with the panel. */
.helpq-row-acts{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  flex-shrink:0;
}
/* On a phone four buttons on one line squeezed a name onto three lines
   and split "Mark handled" in half. The two that open a page take a
   full-width line each, and the two 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;}
}
/* flex outranks the hidden attribute, so a closed panel would still
   take its line on 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 ----
   The ticks only cover the phases the site knows about, so this is the
   same queue reached with a sentence. It reads as a form rather than a
   card, because what it collects is two 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 ----
   Unread reads through the whole row, the same as a notification does,
   because a row in a list of twenty is found by its ground and not by a
   mark in one corner of it. */
.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;}