/* =============================================================================
   NEEDS ATTENTION

   Sits above the My Day grid. It has to read as the most important thing on
   the screen without shouting, because a builder opens this first thing in the
   morning and a panel that looks like an alarm every day stops being read.

   The severity colour is an accent on a neutral card, never a filled red
   banner. It uses the platform tokens rather than new colours, and every
   severity carries a WORD as well as a colour (see the module header): the
   dot is a supporting signal, not the only one.
   ============================================================================= */

.na-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  padding:14px 16px;
  margin:0 0 10px;
}

.na-header{ display:flex; align-items:baseline; gap:10px; }

.na-head{
  font-size:15px; font-weight:650; color:var(--ink);
  margin:0; letter-spacing:-.01em;
}
.na-meta{ font-size:12px; color:var(--ink-3); margin-left:auto; }

.na-desc{ font-size:13px; color:var(--ink-2); margin:4px 0 0; line-height:1.45; }

/* A CALM EMPTY STATE. This is the state the product is trying to produce, so
   it should feel like an achievement rather than an absence. */
.na-clear .na-head{ color:var(--green); }
.na-quietstate .na-head{ color:var(--ink-3); font-weight:550; }
/* Tinted with the platform's own red fill rather than a one-off border
   colour, so the error card belongs to the same system as every other. */
.na-error{ background:var(--red-soft); }
.na-error .na-head{ color:var(--red); }

/* NOT GREEN, DELIBERATELY. Green is the earned all-clear. "MUVA is not
   watching your schedule yet" is a setup gap, so it takes the platform's
   warning fill: it must read as something to fix, never as reassurance. */
/* THE UNWATCHED STATE IS A NOTE, NOT A WARNING.

   It was `background:var(--amber-soft)` with an amber heading: a standing
   yellow banner in My Day about something the system is not doing. Amber is
   for a condition somebody must act on now; "a feature has not been
   configured" is not that, and dressing it as an alert spends the user's
   attention on it every day for ever.

   The note keeps the panel's ordinary surface and quiet text. `.na-unwatched`
   is left defined so a saved layout or a stale bundle cannot fall back to an
   unstyled block. */
.na-unwatched, .na-note{ background:transparent; padding-top:0; padding-bottom:0; }
.na-note .na-desc{ margin:0; }
.na-note .na-link{ color:var(--blue); text-decoration:none; }
/* the retry in the one-line error is a button dressed as the same link */
.na-note button.na-link{ font:inherit; background:none; border:0; padding:0; cursor:pointer; }
.na-note .na-link:hover{ text-decoration:underline; }

/* ---- the list ------------------------------------------------------------ */
.na-list{ list-style:none; margin:10px 0 0; padding:0; }

.na-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.na-list .na-item:first-child{ border-top:0; padding-top:4px; }

/* A snoozed row is still listed, and still visibly set aside. */
.na-snoozed{ opacity:.62; }

.na-sev{
  width:8px; height:8px; border-radius:var(--pill);
  margin-top:6px; flex:0 0 auto;
}
.na-critical{ background:var(--red); }
.na-high{ background:var(--red); }
.na-medium{ background:var(--amber); }
.na-low{ background:var(--ink-3); }

.na-body{ flex:1 1 auto; min-width:0; }

.na-title{
  font-size:14px; font-weight:600; color:var(--ink);
  margin:0; line-height:1.35;
}
.na-item .na-desc{ font-size:12.5px; margin-top:2px; }

/* The severity word, coloured to match its dot. `span` rather than a chip,
   because four chips in a row reads as decoration. */
.na-sevlbl{ font-weight:600; }
.na-sevlbl.na-critical, .na-sevlbl.na-high{ background:none; color:var(--red); }
.na-sevlbl.na-medium{ background:none; color:var(--amber); }
.na-sevlbl.na-low{ background:none; color:var(--ink-3); }
.na-dot{ padding:0 5px 0 0; }

/* ---- actions ------------------------------------------------------------- */
.na-actions{ display:flex; gap:6px; align-items:center; flex:0 0 auto; flex-wrap:wrap; }
.na-more{ margin-top:8px; }

.na-btn{
  font:inherit; font-size:12.5px; font-weight:550;
  height:30px; padding:0 11px;
  border-radius:var(--r-sm);
  border:1px solid var(--line-2);
  background:var(--surface);
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
}
.na-btn:hover{ background:var(--surface-2); }
.na-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* The dark button lifts on hover rather than darkening. #141416 is already
   the platform's darkest surface, so a darker hover would be a colour that
   exists nowhere else; the active nav pill uses the same shadow treatment. */
.na-primary{ background:var(--black); border-color:var(--black); color:#fff; }
.na-primary:hover{ box-shadow:0 4px 12px rgba(20,20,22,.28); }
.na-quiet{ border-color:transparent; color:var(--ink-3); }
.na-quiet:hover{ color:var(--ink); background:var(--surface-2); }

/* ---- snooze menu --------------------------------------------------------- */
.na-menu{
  position:fixed; z-index:9000;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:0 8px 24px rgba(20,20,22,.12);
  padding:4px; min-width:172px;
}
.na-mitem{
  display:block; width:100%; text-align:left;
  font:inherit; font-size:13px; color:var(--ink);
  background:none; border:0; cursor:pointer;
  padding:8px 10px; border-radius:var(--r-sm);
}
.na-mitem:hover{ background:var(--surface-2); }
.na-mitem:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }

/* ---- mobile ---------------------------------------------------------------
   THE ACTIONS DROP BELOW THE TEXT AND GROW. On a phone on a site this is
   operated with a thumb, often in gloves; 30px targets side by side with the
   title do not survive that. */
@media (max-width:760px){
  .na-panel{ border-radius:var(--r-md); padding:12px 12px 14px; }
  .na-item{ flex-wrap:wrap; }
  .na-body{ flex:1 1 100%; }
  .na-actions{ flex:1 1 100%; margin-top:8px; }
  /* 44px, which is the platform's mobile control height (.fr-seg, .fr-f,
     .fr-add all use it) and the touch-target floor. MEASURED at 375px on the
     first browser pass these were 38px: comfortably tappable at a desk and
     not on a site in gloves, which is where this panel is actually used. */
  .na-btn{ height:44px; padding:0 14px; font-size:13px; flex:1 1 auto; }
  .na-quiet{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:no-preference){
  .na-item{ transition:opacity .18s ease; }
}